Question

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

Answer 1

原因：Coz time为您提供匹配节点的列表。并且您可以在列表中使用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;
}

Answer 2

addEventListener on NodeList

如果要使用.querySelectorAll选择元素，则必须遍历每个节点并附加事件侦听器。

看起来你可能不熟悉使用JavaScript中的DOM。如果是这种情况，我建议您查看jQuery。它不是一个轻量级的库，但它使许多这些事情变得更容易。

Answer 3

代码中的2个问题。

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

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

获取其父.parentNode

希望这会有所帮助：）

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的第一个待办事项列表

3 个答案: