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

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 .tab，您可以使用以下方法更改范围内的选项卡：

$(".tab").on("click", function() {
  var tabID = $(this).attr("data-item");
  $(this).closest('.tabbedContent').find('.image[data-item='+tabID+']').addClass('active');
});

Answer 3

声明事件时尝试停止事件传播：

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

  event.stopPropagation();

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

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

});