Question

我有一个图像模式，当我将一个事件处理程序绑定到一个Id时，它将起作用，但是当我将它应用于一个类以使它从点击的任何图像中触发时都没有。

这是html的一部分

<div class="column">
  <img src="images/journalism-images/j1.jpg" class="grid-img" id="myImage">
  <img src="images/journalism-images/j2.jpg" class="grid-img">
</div>

以下是我的Javascript

var modal = document.getElementById('myModal');
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var images = document.getElementById("myImage");
var close = document.querySelector(".image-modal-close");

function changeImage() {
img.src = modalImg.src;
}

images.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
changeImage();
}

所以基本上发生的事情就是我把#myImage的ID放在哪个图像上会用正确的图像src激活模态，但是当我使用像

这样的东西时我无法触发模态

document.querySelectorAll(".grid-img");

任何人都可以帮助我吗？

Answer 1

var images = document.querySelectorAll(".grid-img");
for ( var index = 0; index < images.length; index ++ ) {
    images[index].addEventListener("click",function(e) {
        // Do whatever you need.
    },false);
}

或者

var $images = $( '.grid-img' );
$images.on( 'click', function(e) {
    // Do whatever you need.
});

请记住，querySelectorAll会返回元素集。

Answer 2

使用jquery：

$(".grid-img").on("click", function() {
      //logic
}

QuerySelectorAll将返回元素集。

如果你想要javascript：

document.getElementsByClassName("grid-img").addEventListener("click",function(e) {
    //Your logic
}

您还可以观看getElementsByClassName

的Example

getElementsByClassBame的示例：

var element = document.getElementsByClassName("grid-img");

element[0].addEventListener("click",function(e) {
        //Your logic
}
element[1].addEventListener("click",function(e) {
        //Your logic
}

无法将click事件绑定到一组类元素

2 个答案: