第一个使用 querySelectorAll 的待办事项列表

Question

我在使用 querySelectorAll 时遇到一些问题。脚本仅适用于 querySelector，但它仅首先删除 li。当我尝试用 querySelectorAll 替换 querySelector 以使所有删除按钮工作时出现错误 - "deleteButton.addEventListener is not a function".

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');
});

Answer 1

原因：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>

Answer 2

addEventListener on NodeList

如果您想将 .querySelectorAll 用于 select 您的元素，则必须遍历每个节点并附加事件侦听器。

您可能不熟悉 JavaScript 中的 DOM。如果是这样，我建议您看一下 jQuery。它不是一个轻量级库，但它使许多事情变得容易得多。

Answer 3

您的代码中有 2 个问题。

首先querySelectorAll将return一个包含所有匹配查询的元素的数组。我添加了一个 console.log(deleteButtons), so you can see what thequerySelectorAll`` 正在生成。您将需要一个循环来将事件侦听器添加到数组中的每个元素。

其次，您可以使用 this 获取触发事件的按钮，然后使用 js .parentNode

获取其父项 <li>

希望对您有所帮助:)

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

.li-delete {display:none;}

<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>

第一个使用 querySelectorAll 的待办事项列表

First To-do-list with querySelectorAll

javascript

jquery-selectors