我正在尝试使用查询选择器选择多个元素，但它似乎不起作用，我不知道为什么

我尝试了queryselector，它选择了第一个元素。我也尝试过使用for循环，但它也不起作用，也许我做错了。有人能帮我吗？

<html>
<body>
<div id="list">
<div id="item1" class="bttn">Apple</div>
<div id="item2" class="bttn">Mango</div>
<div id="item3" class="bttn">Banana</div>
<div id="item4" class="bttn">Kiwi</div>
</div>
<style> 
.bttn{
display: flex;
cursor: pointer;
} 
</style>
<script>
var list = document.querySelectorAll(".bttn");
console.log(list);
list.onclick = function(){
this.style.background = "red";
};
</script>
</body>
</html>

您需要循环遍历您的集合，并将click监听器应用于每个匹配的元素，然后使用event.target访问处理程序中的该元素

<script>
var list = document.querySelectorAll(".bttn");
console.log(list);
list.forEach(el => el.addEventListener('click', function(e){
e.target.style.background = "red";
}))
</script>

如果需要，您可以抽象出侦听器函数

<script>
let list = document.querySelectorAll(".bttn");
const onBttnClick = (e) => {
e.target.style.background = "red";
}
list.forEach(el => el.addEventListener('click', onBttnClick))
</script>

您正在将onlick事件侦听器添加到Dom元素数组中。您必须对数组进行迭代，并将事件侦听器分配给每个元素。

<html>
<body>
<div id="list">
<div id="item1" class="bttn">Apple</div>
<div id="item2" class="bttn">Mango</div>
<div id="item3" class="bttn">Banana</div>
<div id="item4" class="bttn">Kiwi</div>
</div>
<style> 
.bttn{
display: flex;
cursor: pointer;
} 
</style>
<script>
var list = document.querySelectorAll(".bttn");
console.log(list);
list.forEach(function(e){
e.addEventListener('click', function(){
this.style.background = "red";
}, false);
});
</script>
</body>
</html>

相关内容

最新更新

热门标签：