如何在JavaScript中复用点击事件的active类判断逻辑？

首先得指出你当前代码里的两个小问题：一是重复写了遍历section并检查active状态的逻辑，二是原代码会给所有匹配的元素绑定事件（哪怕它们不在active的section里），如果有多个section.active还会重复绑定事件，导致点击一次触发多次回调。

下面给你两种原生JS的最简复用方案，根据你的场景选择：

方案一：仅给当前active section内的元素绑定事件（适合section状态固定的场景） #

如果你的section的active状态在页面初始化后不会变化，那么可以把「查找active section + 绑定事件」的逻辑抽成一个通用函数：

// 通用函数：给active section内的指定元素绑定点击事件
function bindToActiveSection(selector, onClick) {
  // 找到当前激活的section（如果有多个active section，改用querySelectorAll并遍历）
  const activeSection = document.querySelector('.section.active');
  if (!activeSection) return;

  // 只在active section内查找目标元素，避免给其他section的元素绑定事件
  const targetElements = activeSection.querySelectorAll(selector);
  
  targetElements.forEach(element => {
    element.addEventListener('click', onClick);
  });
}

然后你只需要传入不同的选择器和处理逻辑即可：

// 绑定button的点击事件：给hidden-background加active类
bindToActiveSection('.button', function() {
  this.querySelector('.hidden-background').classList.add('active');
});

// 绑定hidden-content的点击事件：给自己加active类
bindToActiveSection('.hidden-content', function() {
  this.classList.add('active');
});

方案二：点击时实时检查所在section的状态（适合section状态动态切换的场景） #

如果你的section的active状态会动态变化（比如切换tab），那么上面的方案就不适用了——因为初始化绑定的事件不会随着section状态变化而更新。这时候可以用一个「包装函数」，在点击时才检查元素所在的section是否激活：

// 通用包装函数：只有当元素所在section是active时，才执行回调
function whenActiveSection(onClick) {
  return function(event) {
    // 找到当前点击元素所在的最近section
    const parentSection = this.closest('.section');
    
    // 检查section是否存在且激活
    if (parentSection && parentSection.classList.contains('active')) {
      // 把当前元素和事件对象传给回调，保持this指向正确
      onClick.call(this, event);
    }
  };
}

然后给所有目标元素绑定这个包装后的事件：

// 给所有button绑定事件
document.querySelectorAll('.button').forEach(button => {
  button.addEventListener('click', whenActiveSection(function() {
    this.querySelector('.hidden-background').classList.add('active');
  }));
});

// 给所有hidden-content绑定事件
document.querySelectorAll('.hidden-content').forEach(content => {
  content.addEventListener('click', whenActiveSection(function() {
    this.classList.add('active');
  }));
});

这种方式的好处是，不管section的active类什么时候被添加/移除，点击元素时都会实时判断，不需要重新绑定事件。

为什么这两种方案更优？ #

• 完全复用了重复的逻辑，避免了代码冗余
• 更精准地控制了事件绑定的范围（方案一）或触发条件（方案二），解决了原代码中给无关元素绑定事件的问题
• 代码更简洁，可读性更高，后续新增类似事件只需要调用通用函数即可

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