Question

我正在尝试使用相同的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');
    }   
});

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

Answer 1

从this移除$( ".link-chart", 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>

Answer 2

首先，$( ".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')的缩写。

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

2 个答案: