如何简化代码，用单个点击事件为对应元素切换指定CSS类？

嘿，这个重复绑定事件的场景我太熟了！每次写一堆一模一样的事件绑定不仅冗余，以后要加新按钮或者改逻辑的时候也特别麻烦。咱们可以通过统一类名或者DOM关系定位的思路，只用一个点击事件就能搞定所有元素的类切换，给你两种实用方案：

方案一：统一类名（推荐，更易维护） #

首先咱们先优化下HTML结构，给所有需要触发切换的按钮加一个通用类（比如toggle-btn），内部需要切换类的元素也统一用一个通用类（比如toggle-target），这样结构更清晰，扩展性也更强：

<button class="toggle-btn"> <div class="toggle-target"> lorem </div> </button>
<button class="toggle-btn"> <div class="toggle-target"> ipsum </div> </button>

然后只需要写一段jQuery代码，利用this获取当前被点击的按钮，再找到它内部的目标元素切换类：

$('.toggle-btn').on('click', function() {
  // $(this)就是当前被点击的按钮，find()找到内部的目标元素
  $(this).find('.toggle-target').toggleClass('toggle-something');
});

不管之后你加多少个按钮，只要保持这个结构，这段代码都能生效，完全不用再新增事件绑定。

方案二：不修改现有HTML结构（兼容现有代码） #

如果不想改动现有的HTML，也可以直接通过DOM的父子关系来定位目标元素，不用依赖新的类名：

// 选择所有需要触发的按钮
$('.first, .second').on('click', function() {
  // 直接取当前按钮的子元素，切换类
  $(this).children().toggleClass('toggle-something');
});

要是按钮数量多，还可以用属性选择器简化选择器写法：

// 匹配类名以first或second开头的按钮
$('button[class^="first"], button[class^="second"]').on('click', function() {
  $(this).children().toggleClass('toggle-something');
});

额外技巧：支持动态添加的按钮 #

如果你的按钮是通过JS动态生成的（比如点击某个按钮新增一个切换按钮），那上面的直接绑定方式就失效了，这时候可以用事件委托，把事件绑定到父元素上：

// 这里用body做父容器，建议换成更具体的父元素（比如按钮的直接父div）
$('body').on('click', '.toggle-btn', function() {
  $(this).find('.toggle-target').toggleClass('toggle-something');
});

这样哪怕之后动态新增的按钮，点击事件依然能正常触发，灵活性拉满~

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