無法將點擊事件綁定到一組元素

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的示例

getElementsByClassBame示例：

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

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