如何切换点击元素对应closest元素的类？现有代码批量切换问题求助

嘿，我明白你的问题了——现在你的代码会把页面上所有.process--info的类都切换掉，这是因为你用了全局选择器，没有限定只操作当前点击元素对应的那个目标元素。咱们来修改一下代码，让它只作用于对应的元素：

核心思路 #

• 点击.process--img时，先找到它所在的.process父容器，再在这个容器里定位对应的.process--info，只切换这个元素的类
• 点击.process--info时，直接切换自身的类就好，因为你点击的就是目标元素本身

修改后的代码 #

$(document).ready(function(){
  // 点击.process里的图片时，切换对应.process-info的类
  $(".process .process--img").click(function(){
    // 找到当前图片所在的.process容器，再找里面的.process--info
    $(this).closest('.process').find('.process--info').toggleClass("process--shown");
  });
  
  // 点击.process-info时，切换自身的类
  $(".process .process--info").click(function(){
    $(this).toggleClass("process--shown");
  });
});

关键方法解释 #

• $(this)：代表当前被点击的DOM元素，确保我们操作的是触发事件的那个元素
• .closest('.process')：向上遍历DOM树，找到最近的.process父容器，这样就能限定操作范围在当前模块内
• .find('.process--info')：在找到的.process容器里，查找后代中的.process--info元素，精准定位到对应的目标元素

这样修改后，不管页面上有多少个.process模块，点击其中一个模块里的图片或者信息框，都只会切换当前模块内的.process--info的process--shown类啦！

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