Javascript问题：如何选择所有div'；使用相同的类名并附加事件？

如何将事件侦听器附加到具有相同类名的所有div

在下面的示例中，我试图向div添加一个类名scroll-x，这样它就可以通过运行JS代码获得水平滚动特性。但是JS代码只适用于第一个div

这是一支钢笔

---

您应按以下方式更改选择：

const scrollAreas = document.querySelectorAll(".scroll-x");

然后连接eventListener

scrollAreas.forEach((scrollArea)=>scrollArea.addEventListener("mousedown", (e) => {
//Code goes here
}));

---

尝试将其全部放在for循环中，并使用计数器访问每个元素。在回调函数中使用

this

来访问元素

constscrollarea=document.querySelector（“.scroll-x”）；
让isDown=false；
让startX；
让我们离开；
让长度=滚动面积。长度；
for（设i=0；i{
isDown=真；
this.classList.add（“活动”）；
startX=e.pageX-this.offsetLeft；
scrollLeft=this.scrollLeft；
});
scrollArea[i].addEventListener（“mouseleave”，（）=>{
isDown=假；
此.classList.remove（“活动”）；
});
scrollArea[i].addEventListener（“鼠标悬停”，（）=>{
isDown=假；
此.classList.remove（“活动”）；
});
scrollArea[i].addEventListener（“mousemove”，（e）=>{
如果（！isDown）返回；
e、 预防默认值（）；
const x=e.pageX-this.offsetLeft；
const walk=（x-startX）*3；//快速滚动
this.scrollLeft=scrollLeft-漫游；
});
}

[…queryselectoral（'.sroll-x'）].map（el=>el.addEventListener（'event'，fn））

使用而不是分配多个事件 — 它更易于维护，并且适用于动态添加的元素。例如，使用an's。请参阅和。感谢您的帮助，但他的方法对我不起作用。不幸的是：（尝试了forEach方法没有得到任何错误，但它不能使两个div都可滚动。

scrollAreas.forEach((scrollArea)=>scrollArea.addEventListener("mousedown", (e) => {
//Code goes here
}));