为javascript中的所有点击处理程序事件重用if语句答案

【问题标题】：Re-use if statement for all click handler events in javascript为javascript中的所有点击处理程序事件重用if语句
【发布时间】：2018-05-27 08:02:13
【问题描述】：

我的页面上有一些单击处理程序事件，它们只是将活动类添加到元素。我只希望在当前部分的课程处于活动状态时触发事件。我有这个工作正常，但我正在做的是运行相同的 for 循环和 if 语句检查我的部分中的活动类是否有不同的点击事件。寻找最简单的方法来重用它，只使用 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');
            });
        }
    }
}

第二次点击事件再次检查活动部分类，然后将活动类添加到隐藏内容 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');
            });
        }
    }
}

谢谢

【问题讨论】：

for (var h = 0; h < button.length; h++) { 是不是打错字了？
从字面上看，我自己也看到了这一点并进行了修改。这是一个错字

标签： javascript

【解决方案1】：

我会这样做：

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 仍然绑定到旧部分）

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

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

当然，这整个事情只用 css 会更容易：

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

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

【讨论】：