使用此选项来选择具有相同名称的各种类中的不同类

我正在尝试为每个类使用相同的jQuery脚本来制作不同的链接。我不想为每个链接编写jQuery脚本，而只想使用一个函数。使用此选项来选择具有相同名称的各种类中的不同类

我的HTML结构是：

<a href="#" class="link-chart lx-link-chart"> 
    <div class="link-selector-one"> 
    <div class="link-selector-two red"></div> 
    </div> 
</a> 
<a href="#" class="link-chart lx-link-chart"> 
    <div class="link-selector-one"> 
    <div class="link-selector-two red"></div> 
    </div> 
</a>

这里我使用点击选择同一类两个环节，并且里面他们每个人都有div的

jQuery的脚本内部不同类别到目前为止是：

$(".link-chart", this).click(function($e) { 
    if($(this).find(".link-selector-two").hasClass('red')) {    
     $('.link-selector-two').addClass('cssclass');   
     $('.link-selector-one').addClass('cssclass'); 
    } else { 
     $('.link-selector-two').removeClass('cssclass'); 
    } 
});

我正试图使用（this），但在当前状态它不工作。我的目标是如果我点击第一个链接来更改只包含<a>链接内的第一个链接div的样式。如果我选择第二个，则仅对第二个进行更改。现在我删除这个选项它如果我点击其中的任何一个，它正在对所有链接进行更改，但是想法是仅在所选链接上进行更改。

来源

2016-02-01 John Siniger

首先，$(".link-chart", this)不符合您的想法。由于您在全球范围内并且的功能不是，所以this只是window，因此这里不需要。您可以使用$(".link-chart", this).click(function($e) {});。

二，在此点击处理程序中，this将是您点击的<a>标记。从那里你可以得到你想要的孩子元素。

$(".link-chart").click(function($e) { 
    if($(this).find(".link-selector-two").hasClass('red')) {    
     $('.link-selector-two', this).addClass('cssclass');   
     $('.link-selector-one', this).addClass('cssclass'); 
    } else { 
     $('.link-selector-two', this).removeClass('cssclass'); 
    } 
});

注：$('.link-selector-two', this)是$(this).find('.link-selector-two')简写。

来源

2016-02-01 15:48:34

您可以使用以下命令对您的选择器进行分组：$（'。lin k-selector-one，.link-selector-two'，this）.addClass（'cssclass'）;' –

@ Magicprog.fr：是的，这将是一个好主意:-) –

谢谢！很好的解释和问题解决。 –

从$(".link-chart", this)删除this和添加this您选择$('.link-selector-two')和$('.link-selector-one')点击函数内将各自link-chart

运行中影响项目下面的代码片段，看看它在行动

$(".link-chart").click(function($e) { 
 
    if($(this).find(".link-selector-two").hasClass('red')) { 
 
      $('.link-selector-two', this).addClass('cssclass'); 
 
      $('.link-selector-one', this).addClass('cssclass'); 
 
    } else { 
 
     $('.link-selector-two', this).removeClass('cssclass'); 
 
    } 
 
});

.red { color: red; } 
 

 
.cssclass { color: blue !important; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="link-chart lx-link-chart"> 
 
    <div class="link-selector-one"> 
 
    <div class="link-selector-two red">One</div> 
 
    </div> 
 
</a> 
 
<a href="#" class="link-chart lx-link-chart"> 
 
    <div class="link-selector-one"> 
 
    <div class="link-selector-two red">Two</div> 
 
    </div> 
 
</a>

来源

2016-02-01 15:57:07

使用此选项来选择具有相同名称的各种类中的不同类

回答

相关问题