时间戳

首页 > 解决方案 > 为javascript中的所有点击处理程序事件重用if语句

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

问题描述

我的页面上有一些单击处理程序事件，它们只是将一个活动类添加到一个元素。我只希望在当前部分的课程处于活动状态时触发事件。我有这个工作正常，但我正在做的是运行相同的 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');
            });
        }
    }
}

谢谢

标签： javascript

解决方案

我会做这样的事情：

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; }

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

推荐阅读