在属性匹配的范围（和数据属性）中访问此元素

Question

我有以下片段：

$(".tab").on("click", function() {

  var tabID = $(this).attr("data-item");

  $('.image[data-item = ' + tabID + ']').addClass('active');

});

<div class="tabbedContent">

  <div class="imageWrapper">

     <div class="image" data-item="item--1">

      <!-- image -->

     </div>

     <div class="image" data-item="item--2">

      <!-- image -->

     </div>

  </div>

  <div class="tabs__rapper">

    <div class="tab" data-item="item--1" >

      <!-- tab text here -->

    </div>

    <div class="tab" data-item="item--2" >

      <!-- tab text here -->

    </div>

  </div>

  

</div>

基本上，当用户单击选项卡时，它会显示分配给该部分的图像（它们通过 链接data-item）。

但是，具有以下条件：

$('.image[data-item = ' + tabID + ']').addClass('active');

如果我在一页上有两个这样的选项卡式模块（如果我在同一页上有两个，则它们data-items将相同，因为它们都从 1 开始），那么两个部分中的图像都会发生变化。

我想做的是使用 更改范围内的选项卡this。

但是，我不确定如何做到这一点，我已经尝试过（需要这样的东西）：

$(this + '[data-item = '+tabID+']').addClass('active');

我离得还远吗？

Answer 1

由于.tab范围位于 内部.tabbedContent：$(this).parent('.tabs__rapper').parent('.tabbedContent').find('.image[data-item='+tabID+']').addClass('active');

Answer 2

假设.imageis inside&nbsp;.tab，您可以使用以下方法更改范围内的选项卡：$(".tab").on("click",&nbsp;function()&nbsp;{ &nbsp;&nbsp;var&nbsp;tabID&nbsp;=&nbsp;$(this).attr("data-item"); &nbsp;&nbsp;$(this).closest('.tabbedContent').find('.image[data-item='+tabID+']').addClass('active'); });

Answer 3

声明事件时尝试停止事件传播：$(".tab").on("click", function( event ) {&nbsp; event.stopPropagation();&nbsp; var tabID = $(this).attr("data-item");&nbsp; $('.image[data-item = ' + tabID + ']').addClass('active');});