对javascript中的所有单击处理程序事件重新使用if语句

我的页面上有几个click处理程序事件，它们只是向元素添加一个活动类。我只希望在当前节的类处于活动状态时触发事件。我已经可以正常工作了，但是我正在运行相同的for循环和if语句，检查我的部分中活动类的不同click事件。正在寻找使用javascript而不是jquery重新使用它的最简单方法

<section class="section section-1 active">
  <div class="button">
    <div class="hidden-background"></div>
  </div>
  <div class="hidden-content"></div>
</section>

<section class="section section-2">
    <div class="button">
      <div class="hidden-background"></div>
    </div>
    <div class="hidden-content"></div>
  </section>

  <section class="section section-3">
      <div class="button">
        <div class="hidden-background"></div>
      </div>
      <div class="hidden-content"></div>
    </section>

按钮单击事件检查活动部分，只找到第一个div标记（隐藏背景）并将活动类应用于它

var section = document.querySelectorAll('.section');
var button = document.querySelectorAll('.button');

for (var s = 0; s < section.length; s++) {
    if (section[s].classList.contains('active')) {
        for (var b = 0; b < button.length; b++) {
            button[b].addEventListener('click', function(){
                this.getElementsByTagName('div')[0].classList.add('active');
            });
        }
    }
}

var section=document.querySelectorAll（'.section'）；
var-button=document.queryselectoral（'.button'）；
对于（var s=0；s

第二次单击事件再次检查活动节类，然后将活动类添加到隐藏内容div

var section = document.querySelectorAll('.section');
var hiddenContent = document.querySelectorAll('.hidden-content');

for (var s = 0; s < section.length; s++) {
    if (section[s].classList.contains('active')) {
        for (var h = 0; h < hiddenContent.length; h++) {
            hiddenContent[h].addEventListener('click', function(){
                this.classList.add('active');
            });
        }
    }
}

var section=document.querySelectorAll（'.section'）；
var hiddenContent=document.querySelectorAll（'.hiddenContent'）；
对于（var s=0；s

---

谢谢

我会这样做：

const makeActive = function(evt) {
  evt.target.parentElement
    .querySelectorAll('.hidden-background, .hidden-content')
    .forEach( el => el.classList.add('active'));
};

document
  .querySelectorAll('.section.active .button')
  .forEach( btn => btn.addEventListener('click', makeActive) );

假设活动部分也由javascript切换。（如果有人更改了活动节，上述操作将不再有效，因为eventListener仍然绑定到旧节）

当然，如果只使用css，整个过程会更容易：

.hidden-background, .hidden-content { display: none; }
.active .hidden-background, .active .hidden-content { display: block; }

---

但我想这是一个完全不同的问题…

对于（var h=0；h

这是一个打字错误吗？我自己刚刚看到并修改了它。这是一个打字错误

.hidden-background, .hidden-content { display: none; }
.active .hidden-background, .active .hidden-content { display: block; }