基于父类实现不同jQuery点击函数的优化方案求助

你遇到的问题本质是静态事件绑定不支持动态元素类名变更——一开始绑定的是.major .menu a这类固定选择器，当父类切换成.minor后，原来的绑定不会自动转移。不用搞7个链接，用事件委托就能搞定，每次点击时实时读取当前父容器的类，再执行对应的操作。

核心思路 #

1. 把点击事件绑定到不会被移除/修改的静态父元素（比如最外层容器，甚至document），监听.menu a的点击事件
2. 点击时，先获取当前a标签所在的父容器的目标类（.major/.minor等7种）
3. 根据这个类名，找到对应的xxx-result元素，给它加.act，同时移除其他所有result元素的.act

代码示例 #

HTML结构（示例）

<!-- 可切换类的父容器 -->
<div class="parent-container major">
  <ul class="menu">
    <li><a href="#" class="trigger">激活对应结果</a></li>
  </ul>
</div>

<!-- 结果元素 -->
<div class="major-result">Major结果</div>
<div class="minor-result">Minor结果</div>
<div class="other-result">Other结果</div>
<!-- 剩下4种result元素省略 -->

jQuery代码

// 用事件委托绑定点击事件，绑定到静态的document（或更接近的父元素）
$(document).on('click', '.menu a', function(e) {
  e.preventDefault(); // 阻止链接默认跳转
  
  // 获取当前父容器的类，过滤出我们需要的那7种（比如.major/.minor等）
  const parentClasses = $(this).closest('.parent-container').attr('class').split(' ');
  const targetClass = parentClasses.filter(cls => ['major', 'minor', 'other1', 'other2', 'other3', 'other4', 'other5'].includes(cls))[0];
  
  // 移除所有result元素的.act类
  $('[class$="-result"]').removeClass('act');
  // 给对应的xxx-result元素添加.act类
  $(`.${targetClass}-result`).addClass('act');
});

代码说明 #

• 事件委托：$(document).on('click', '.menu a', ...) 是把事件绑定到document上，不管.parent-container的类怎么切换，只要.menu a存在，点击就会触发
• 动态获取父类：用closest('.parent-container')找到最近的父容器，然后提取它的类名，过滤出我们需要的7种之一
• 严格执行类操作：先移除所有result的.act，再给目标添加，完全符合你要求的“严格执行addClass/removeClass规则”，没有切换逻辑

额外优化 #

如果担心.parent-container有其他无关类，可以给这7种类加统一前缀，比如type-major、type-minor，这样过滤更简单：

const targetClass = parentClasses.find(cls => cls.startsWith('type-')).replace('type-', '');

然后对应的result元素就是major-result、minor-result，逻辑更清晰。

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