javascript - 如何在类节点列表上切换事件

Question

我正在尝试切换类节点列表上的 JavaScript 事件。我已经完成了下面问题的简化版本。

第一个事件正在执行，但将按钮切换回红色的第二个事件似乎不起作用？ JS 并链接到下面的 Codepen。

Codepen在这里:https://codepen.io/emilychews/pen/EXmzbd?editors=1010

JS

  var clicked = false;

  var $mainMenuButton = document.getElementsByClassName('desktopmenubutton');

if (clicked === false) {
     for (h = 0; h < $mainMenuButton.length; h+=1) {
      $mainMenuButton[h].addEventListener('click', function (e){
        e.currentTarget.style.background = "black";
        clicked = true;  // change clicked state to true
      });    
   }
} else {
    for (i = 0; i < $mainMenuButton.length; i+=1) {
      $mainMenuButton[i].addEventListener('click', function (e){
        e.currentTarget.style.background = "red";
        clicked = false;
      });
    } 
}

Answer 1

您只需要一个事件监听器即可使其正常工作。

var $mainMenuButton = document.getElementsByClassName('desktopmenubutton');


for (h = 0; h < $mainMenuButton.length; h += 1) {
  $mainMenuButton[h].addEventListener('click', function(e) {
    if (e.currentTarget.style.backgroundColor == "red" || e.currentTarget.style.backgroundColor == "") {
      e.currentTarget.style.backgroundColor = "black";
    } else {
      e.currentTarget.style.backgroundColor = "red";
    }
  });
}

* {font-family: arial;}

.desktopmenubutton {
  width: 150px;
  height: 100px;
  background-color: red;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white
}

.button2 {
  left: 300px;
}

<div class="desktopmenubutton button1">Button 1</div>
<div class="desktopmenubutton button2">Button 2</div>