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>

Answer 2

item是一个元素...您也为点击侦听器分配了一个元素。

您要遍历集合，以从集合中的所有元素中删除类

function removeHighlight(item){
  item.addEventListener("click", function(){
    d.forEach(function(element){
  // ^^ iterate collection
        element.classList.remove("highlight");
    });       

  });

}

Answer 3

如果我能理解您的疑问，而您几乎不在那儿：

<button onclick="myFunction()">Try it</button>

<div class="myDIV">
This is a DIV element.
</div>
<div class="myDIV">
This is a DIV element.
</div>
<script>
function myFunction()
{
d = document.querySelectorAll(".myDIV");
d.forEach(removeHighlight);
}
function removeHighlight(item) {

   item.classList.toggle("highlight");
}
</script>

在javascript编码中玩得开心！

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

3 个答案: