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

<分区>

我在使用 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/

上一篇：javascript - 各路 express 如何办理

下一篇：javascript - 无法提取结果集 org.hibernate.exception.SQLGrammarException

相关文章：

javascript - angularJS显示+1月日期

javascript - 如何在 moment.js 中四舍五入到最接近的上 15 分钟

jQuery.each 问题

javascript - 段落选择器内的标题不起作用

javascript - 如何使用 jQuery 选择空输入(值 ="")

javascript - 如何仅获取与特定值匹配的json

javascript - 单击 <Link> 元素时路由器会复制

javascript - 同步多选框中的两个滚动条

jquery选择，加id只是为了方便选择，好不好？

jquery - 是:text case sensitive?