javascript - addEventListener 多重使用

Question

我正在根据youtube教程制作一个应用程序。我已经知道正确的解决方案是什么样的，但我不知道为什么这样的代码不起作用。它只执行一次。我在浏览器中检查“检查器”，它显示第二个 div 获得了事件类，但第二次单击不起作用。

document.querySelector('.emoji').addEventListener('click', function() {
  document.querySelector('.open').classList.toggle('active');
  document.querySelector('.closed').classList.toggle('active');
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.emoji {
  text-align: center;
  font-size: 20rem;
  cursor: pointer;
  display: none;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.active {
  display: block;
}

<!-- emoji no evil 🙈
        emoji monkey 🐵 -->

<div class="emoji open active">🙉</div>
<div class="emoji closed">🙈</div>

现在为什么这个解决方案不起作用？

我认为我有 2 个带有“表情符号”类的元素，所以这应该可行。今天我尝试创建计算器应用程序并遇到同样的问题。当我点击它时，只有第一个按钮起作用。我知道正确的解决方案是:

    document.querySelector('.open').addEventListener('click', function () {
      document.querySelector('.open').classList.toggle('active');
      document.querySelector('.closed').classList.toggle('active');
    });
    
    document.querySelector('.closed').addEventListener('click', function () {
      document.querySelector('.closed').classList.toggle('active');
      document.querySelector('.open').classList.toggle('active');
    });

但我不明白为什么第一个解决方案是错误的。请您解释一下。

Answer 1

document.querySelector 仅返回一个元素，即与选择器匹配的第一个元素。

解决该问题的一种方法是将两个元素包装到一个容器中并监听该元素的点击:

document.querySelector('.emoji-toggle').addEventListener('click', function() {
  document.querySelector('.open').classList.toggle('active');
  document.querySelector('.closed').classList.toggle('active');
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.emoji {
  text-align: center;
  font-size: 20rem;
  cursor: pointer;
  display: none;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.active {
  display: block;
}

<div class="emoji-toggle">
<div class="emoji open active">🙉</div>
<div class="emoji closed">🙈</div>
</div>

或者使用事件委托(delegate):

document.addEventListener('click', function(e) {
  if (e.target.matches('.emoji')) {
    document.querySelector('.open').classList.toggle('active');
    document.querySelector('.closed').classList.toggle('active');
  }
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.emoji {
  text-align: center;
  font-size: 20rem;
  cursor: pointer;
  display: none;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.active {
  display: block;
}

<div class="emoji open active">🙉</div>
<div class="emoji closed">🙈</div>

如果它类似于复选框，您可能想使用第一种方法。

根据您想要执行的操作，您甚至不需要 JavaScript:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.emoji {
  text-align: center;
  font-size: 20rem;
  cursor: pointer;
  display: none;
}

#mycheckbox:checked + label .open {
   display: block;
}

#mycheckbox:not(:checked) + label .closed {
   display: block;
}

#mycheckbox {
   display: none;
}


body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

<input type="checkbox" id="mycheckbox">
<label for="mycheckbox">
  <div class="emoji open">🙉</div>
  <div class="emoji closed">🙈</div>
</label>

如果您尝试使用 input 元素、选择器的位置以及标签元素的位置，并利用过渡和动画，您可以制作移动菜单、不同的字体大小和切换颜色主题，无需任何 JavaScript。