如何让jQuery切换类仅作用于当前slide-container内的元素？

问题根源在于你使用了全局选择器$("a.slide.active")，它会选中页面所有符合条件的元素，导致不同容器的slide互相干扰。只需将操作范围限制在当前点击元素所属的slide-container内即可修复：

修改后的JavaScript代码 #

$(document).ready(function() {
  function activeSlide() {
    // 获取当前点击元素所在的slide-container容器
    const parentContainer = $(this).closest(".slide-container");
    // 仅在当前容器内移除其他slide的active类
    parentContainer.find("a.slide.active").not(this).removeClass("active");
    // 切换当前元素的active状态
    $(this).toggleClass("active");
  }

  $("a.slide").on("click", activeSlide);
});

完整可运行代码示例 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <h1>Test custom slider</h1>
  <div class="slide-container">
    <a href="#" class="slide active">
      <img src="patio-estrie-1.jpeg" alt="">
    </a>
    <a href="#" class="slide">
      <img src="patio-estrie-2.jpeg" alt="">
    </a>
    <a href="#" class="slide">
      <img src="patio-estrie-1.jpeg" alt="">
    </a>
    <a href="#" class="slide">
      <img src="patio-estrie-2.jpeg" alt="">
    </a>
  </div>
  <div class="slide-container">
    <a href="#" class="slide active">
      <img src="patio-estrie-1.jpeg" alt="">
    </a>
    <a href="#" class="slide">
      <img src="patio-estrie-2.jpeg" alt="">
    </a>
    <a href="#" class="slide">
      <img src="patio-estrie-1.jpeg" alt="">
    </a>
    <a href="#" class="slide">
      <img src="patio-estrie-2.jpeg" alt="">
    </a>
  </div>
</div>

<script>
$(document).ready(function() {
  function activeSlide() {
    const parentContainer = $(this).closest(".slide-container");
    parentContainer.find("a.slide.active").not(this).removeClass("active");
    $(this).toggleClass("active");
  }

  $("a.slide").on("click", activeSlide);
});
</script>

核心逻辑说明 #

• $(this).closest(".slide-container")：向上遍历DOM树，精准定位当前点击元素所属的父级容器，锁定操作边界。
• parentContainer.find(...)：仅在目标容器内查找并操作元素，彻底避免跨容器的干扰。

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