javascript - 第一个带有querySelectorAll的待办事项列表

This question already has answers here:

Adding click event listener to elements with the same class
                                
                                    （4个答案）
                                
                        
                                2年前关闭。
            
                    
我在querySelectorAll上遇到了一些问题。脚本仅与querySelector一起使用，但仅删除第一个li。当我尝试用querySelector替换querySelectorAll以使所有删除按钮正常工作时，出现错误-“ deleteButton.addEventListener不是函数”。

的HTML：

body>
 <div id="buttons">
  <input type="text" placeholder="twoje zadanie...">
  <button type="submit" class="add">dodaj</button>
 </div>
 <div id="tasks">
    <ul>
       <li><button class="done">done</button>
       asd
       <button class="delete">x</button></li>
       <li>
       <button class="done">done</button>
       asdd
       <button class="delete">x</button></li>
       <li>
       <button class="done">done</button>
       dsad
       <button class="delete">x</button></li>
    </ul>
 </div>
<script src="script.js"></script>
</body>

js：

   var deleteButton = document.querySelectorAll('.delete');

   deleteButton.addEventListener('click', function() {
      var li = document.querySelector('li');
      li.classList.add('li-delete');
});

最佳答案

原因：Coz querySelectorAll为您提供匹配节点的列表。并且没有.addEve..属性可以在列表中使用。

此外，document.querySelector('.delete');将为您提供第一个按钮，并且只会向此按钮添加侦听器，但您不希望这样做。

如果要将侦听器添加到所有元素，则应遍历列表，并在所有匹配的元素上添加侦听器。喜欢

var el = document.querySelectorAll('.delete');

for(var i=0; i<el.length; i++){
  el[i].addEventListener('click', function(){
    console.log("clicked");
      var li = this.parentNode;
      li.classList.add('li-delete');
  })
}

.li-delete{
   color : red;
}

<div id="tasks">
    <ul>
       <li><button class="done">done</button>
       asd
       <button class="delete">x</button></li>
       <li>
       <button class="done">done</button>
       asdd
       <button class="delete">x</button></li>
       <li>
       <button class="done">done</button>
       dsad
       <button class="delete">x</button></li>
    </ul>
 </div>

关于javascript - 第一个带有querySelectorAll的待办事项列表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50004540/