Question

我试图将点击和mouseout事件侦听器添加到投资组合网站上的每个图像，而不必使用ID。

我用id测试了我的代码，它可以工作，因此错误与调用类名或for循环有关。在我的HTML / CSS中，该类实际上是“ flex-image”，但是在Javascript中，我将该类转换为驼峰式。我不想使用任何框架，仅使用JavaScript。

document.getElementById("test").addEventListener("click", function() {
document.getElementById("test").style.opacity = "1";
document.getElementById("test").style.height = "500px";
document.getElementById("test").style.width = "500px";
document.getElementById("test").style.transition = "1s";
});

document.getElementById("test").addEventListener("mouseout", function() {
document.getElementById("test").style.opacity = ".5";
document.getElementById("test").style.height = "250px";
document.getElementById("test").style.width = "250px";
document.getElementById("test").style.transition = "1s";
});

此测试代码通过id捕获第一张图像，并且该图像正在工作。

var images = document.getElementsByClassName('flexImage');
for (let i=0; i<images.length, i++){
  images[i].addEventListener("click", function() {
   images[i].style.height = "500px";
   images[i].style.width = "500px";
   images[i].style.opacity = "1";
   images[i].style.transition = "1s";
  })

  images[i].addEventListener("mouseout", function() {
    images[i].style.height = "250px";
    images[i].style.width = "250px";
    images[i].style.opacity = ".5";
    images[i].style.transition = "1s";
  })
}

这部分是我写的，以获取该类中的所有元素，但没有用。单击图像或将鼠标移出时没有任何反应。除了引用类元素数组的部分以外，代码基本上是相同的。

在此先感谢您的帮助！

如何将EventListener添加到类的每个元素

0 个答案: