javascript - 为什么我不能为onclick事件调用类？

因此，看来我的javascript onclick事件仅以ID起作用，但是当我调用类“ listButton”时，只有第一个列表项（“所有奖励”）关闭下拉div。

当我单击任何其他列表项（食品奖励，饮料奖励，假日奖励，班级奖励，待定）时，它不会关闭我的下拉div。

我不确定为什么会这样。还有另一种方法可以完成此操作吗？我必须使用香草JS。

var overlay2 = document.getElementById("overlay2");
var dropdown = document.getElementById("rewardsDropdown");
var listButton = document.querySelectorAll(".listButton");

document.getElementById("dropdownButton").onclick = function() {
  dropdown.classList.add("open");
  overlay2.classList.add("open");
};

function removeOpenRewards() {
  dropdown.classList.remove("open");
  overlay2.classList.remove("open");
};

for (i = 0; i < listButton.length; i++) {
  listButton[i].addEventListener("click", removeOpenRewards);
}

overlay2.addEventListener("click", removeOpenRewards);
document.getElementById("close").addEventListener("click", removeOpenRewards);

#container #activeRewards #mobileDropdown #overlay2 {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  z-index: 999;
  display: none;
}

#container #activeRewards #mobileDropdown #overlay2.open {
  display: block;
}

#container #activeRewards #mobileDropdown #dropdownButtonCont {
  width: 100%;
  height: 59px;
  margin: 15px 0 20px 0;
}

#container #activeRewards #mobileDropdown #dropdownButtonCont button {
  width: 100%;
  height: 100%;
  background-color: #FAFAFA;
  border: 0;
  outline: 0;
  border-radius: 10px;
  color: #696969;
  font-size: 18px;
  font-family: 'Lato', sans-serif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 20px;
}

#container #activeRewards #mobileDropdown #dropdownButtonCont button:focus {
  background-color: #F0F0F0;
}

#container #activeRewards #mobileDropdown #dropdownButtonCont button:after {
  border-style: solid;
  border-width: 2px 2px 0 0;
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  color: #C7C7C7;
  position: absolute;
  right: 40px;
}

#container #activeRewards #mobileDropdown #dropdownButtonCont button span {
  color: #EDAFBD;
  font-size: 12px;
  margin-left: 15px;
}

#container #activeRewards #mobileDropdown #rewardsDropdown {
  width: 100%;
  display: none;
}

#container #activeRewards #mobileDropdown #rewardsDropdown.open {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: fixed;
  z-index: 1000;
  background-color: #FFFFFF;
  left: 0;
  bottom: 0;
  padding-bottom: 30px;
}

#container #activeRewards #mobileDropdown #rewardsDropdown #close {
  color: #D63A5E;
  background-color: #FFFFFF;
  border-radius: 20px;
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.16);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.16);
  font-size: 20px;
  position: absolute;
  left: 20px;
  top: -45px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 15px;
  width: 15px;
  padding: 5px 5px 7px 6px;
}

#container #activeRewards #mobileDropdown #rewardsDropdown #close:hover {
  background-color: #D63A5E;
  color: #FFFFFF;
}

#container #activeRewards #mobileDropdown #rewardsDropdown #close:focus {
  color: #FFFFFF;
  text-decoration: none;
  cursor: pointer;
  background-color: #AF2B49;
}

#container #activeRewards #mobileDropdown #rewardsDropdown h4 {
  color: #505050;
  text-align: center;
  font-size: 18px;
  font-weight: bolder;
  margin: 30px 0;
}

#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList {
  height: 360px;
  overflow: scroll;
  width: 95%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList::-webkit-scrollbar {
  background-color: transparent;
  width: 5px;
  margin-left: 5px;
  padding-left: 5px;
}

#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList::-webkit-scrollbar-thumb {
  background-color: #E0E0E0;
  border-radius: 5px;
}

#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div {
  width: 95%;
  height: 59px;
  margin-top: 5px;
  padding-right: 5px;
}

#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div button {
  width: 100%;
  height: 100%;
  background-color: #FAFAFA;
  border: 0;
  outline: 0;
  border-radius: 10px;
  color: #696969;
  font-size: 18px;
  font-family: 'Lato', sans-serif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 20px;
}

#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div button:focus {
  background-color: #D63A5E;
  color: #FFFFFF;
}

#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div button span {
  color: #EDAFBD;
  font-size: 12px;
  margin-left: 15px;
}

<div id="container">
  <div id="activeRewards">
    <div id="mobileDropdown">
      <div id="dropdownButtonCont">
        <button id="dropdownButton">All Rewards
          <span>(5)</span>
        </button>
      </div>

      <div id="overlay2"></div>

      <div id="rewardsDropdown">
        <span id="close">&times;</span>

        <h4>Reward Categories</h4>

        <div id="dropdownList">
          <div>
            <button class="listButton">All Rewards
              <span>(5)</span>
            </button>
          </div>

          <div>
            <button class="listButton">Food Rewards
              <span>(5)</span>
            </button>
          </div>

          <div>
            <button class="listButton">Beverage Rewards
              <span>(5)</span>
            </button>
          </div>

          <div>
            <button class="listButton">Holiday Rewards
              <span>(5)</span>
            </button>
          </div>

          <div>
            <button class="listButton">Classes Rewards
              <span>(5)</span>
            </button>
          </div>

          <div>
            <button class="listButton">TBA
              <span>(5)</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

最佳答案

Document方法querySelector（）返回其中的第一个Element
  与指定选择器或一组匹配的文档
  选择器。如果找不到匹配项，则返回null。


因此，请替换：

document.querySelector(".listButton").addEventListener("click", removeOpenRewards);

与：

var listButtons= document.querySelectorAll(".listbutton");

listButtons.forEach(function(listButton) {
  listButton.addEventListener("click", removeOpenRewards);
});