javascript - 单击同一 nodeList 中的任何节点时，从 nodeList 中删除类名

Question

我是 javascript 编程的新手，我想了解更多。当我单击同一 nodeList 中的任何节点时，我想从 nodeList 的每个节点中删除类名。

我写了这段代码:

d = document.querySelectorAll(".chat-line__message");
d.forEach(removeHighlight);

function removeHighlight(item){
  item.addEventListener("click", function(){
    item.forEach(function(element){
        element.classList.remove("highlight");
    });
    //for-loop instead of forEach doesn't work either.

  })

}

我做错了什么？谢谢。

Answer 1

要从 nodeList 中的每个节点中删除 .highlight 类，请在 click 事件处理程序中迭代它们并删除 .highlight从那里上课:

var elements = document.querySelectorAll(".chat-line__message");

elements.forEach(function(item) {
  item.addEventListener("click", function() {
    elements.forEach(function(element) {
      element.classList.remove("highlight");
    });
  })
});

ul {
  list-style-type: none;
  padding: 0;
}

li:hover {
  background: cornflowerblue;
}

.chat-line__message {
  font-size: 20px;
  font-weight: bold;
}

.chat-line__message.highlight {
  background: orange;
}

<ul>
  <li class="chat-line__message highlight">A</li>
  <li class="chat-line__message">B</li>
  <li class="chat-line__message highlight">C</li>
  <li class="chat-line__message">D</li>
  <li class="chat-line__message highlight">E</li>
</ul>