点击按钮时：检测状态，为同data-slide-item的tab设置active类

我来帮你把这段代码的逻辑理清楚，先明确你的核心需求：

每次点击按钮时，找到当前处于active状态的.slide-item（带data-slide-item属性），然后给拥有相同data-slide-item值的.tab元素切换显示状态（加show、移hide），同时把其他tab都设为隐藏状态。

现有代码的问题点 #

你的代码里有几个逻辑偏差的地方：

• 遍历.slide-item时，用$(".slide-item").hasClass('active')会检查所有slide元素，而不是当前遍历的那个，应该用$(this)来判断单个元素的状态。
• 获取data-slide-item的方式不对，$(".slide-item").data('slide-item')只会拿到第一个slide的属性值，不是活跃元素的。
• 重复操作tab的逻辑，一会儿判断tab的data值，一会儿又用myEm操作，导致逻辑混乱，没法精准对应到目标tab。

修正后的代码 #

$('button').on("click", function() {
  console.log('going left ..');
  
  // 定位当前处于active状态的slide-item
  const activeSlide = $('.slide-item.active');
  // 如果没有活跃的slide，直接结束函数
  if (!activeSlide.length) return;
  
  // 获取活跃slide的data-slide-item属性值
  const targetSlideItem = activeSlide.data('slide-item');
  
  // 先统一重置所有tab的状态：隐藏
  $('.tab').removeClass('show').addClass('hide');
  
  // 给对应data-slide-item的tab设置为显示状态
  $(`.tab[data-slide-item="${targetSlideItem}"]`).removeClass('hide').addClass('show');
});

代码逻辑说明 #

1. 定位活跃slide：直接用$('.slide-item.active')找到当前激活的slide元素，比遍历更高效。
2. 边界处理：如果没有任何活跃的slide，直接终止函数，避免后续无效操作。
3. 获取目标属性值：从活跃slide上拿到data-slide-item的值，作为匹配tab的依据。
4. 统一重置tab状态：先把所有tab都设为隐藏，再单独设置目标tab为显示，避免出现多个tab同时显示的情况。
5. 精准匹配tab：通过属性选择器找到对应data-slide-item的tab，切换它的显示类。

如果你的tab最终需要的是active类而不是show/hide，只需要把代码里的show和hide替换成active即可，逻辑是一样的。

内容的提问来源于stack exchange，提问作者Nanina