如何通过jQuery实现仅对点击按钮对应的元素切换Class？

问题出在你当前的代码会选中所有.design-layout-card元素执行类切换，需要改为仅操作点击按钮对应的目标元素。

修改后的jQuery代码 #

$(function() {
  $(".image-button-wrapper").addClass("photo-btn");
  $(".design-layout-card").addClass("menu-plugin unactive"); // 合并类添加操作，简化代码
  
  $(".image-button-wrapper").click(function() {
    // 精准定位当前按钮对应的.design-layout-card元素
    $(this).closest(".design-layout-card").toggleClass("unactive", 1000);
  });
});

关键逻辑说明 #

• $(this)：指向当前被点击的按钮元素，确保操作范围限定在触发事件的目标上。
• .closest(".design-layout-card")：从点击按钮向上遍历DOM树，找到最近的带.design-layout-card类的父元素——这就是你需要切换状态的那个元素。

原代码问题分析 #

原代码里$(".design-layout-card").toggleClass(...)会匹配页面上所有该类元素，所以点击任意按钮都会触发全部元素的状态切换。通过$(this)结合DOM遍历方法，就能实现精准操作单个对应元素的需求。

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