Доступ к этому элементу в области (и атрибуте данных), где атрибуты совпадают

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").on("click", function( event ) {
  event.stopPropagation();
  var tabID = $(this).attr("data-item");
  $('.image[data-item = ' + tabID + ']').addClass('active');
});

Answer 2

Предполагая, что .image находится внутри .tab, вы можете изменить вкладку, находящуюся в области видимости, используя:

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

Answer 3

Поскольку .tab находится внутри .tabbedContent:

$(this).parent('.tabs__rapper').parent('.tabbedContent').find('.image[data-item='+tabID+']').addClass('active');