如何将两个功能相同的jQuery点击事件函数合并为一个，同时匹配多个类

解决方案 #

jQuery 选择器原生支持逗号分隔多个选择器，匹配满足任意条件的元素，你不需要修改DOM加通用类，直接合并事件绑定的选择器即可，优化后代码如下：

$(document).on("click", ".class1, .class2", function(event) {
      const $this = $(this);
      if ($this.find($(event.target).closest("a")[0]).length === 0) {
          event.preventDefault();
          $this.find("a")[0].click();
      }
  });

如果你后续可能扩展更多同类逻辑的类，也可以把回调单独抽离为公共函数，修改逻辑时只需要调整一处即可：

// 单独定义公共处理逻辑
const handleCardClick = function(event) {
      const $this = $(this);
      if ($this.find($(event.target).closest("a")[0]).length === 0) {
          event.preventDefault();
          $this.find("a")[0].click();
      }
}

// 绑定事件，后续新增类直接在选择器后追加即可
$(document).on("click", ".class1, .class2", handleCardClick);

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