開幕莫代爾從多個div元素

我怎樣才能得到我的所有其他。開-IMG元素打開我的模式？開幕莫代爾從多個div元素

最後，我想觸發與內部的圖像模態，我敢肯定，我應該使用。這，但不能讓它的工作。

Codepen：http://codepen.io/Middi/pen/EWxKLZ

的Javascript

var modal = document.querySelector(".modal"); 
var modalBg = document.querySelector(".modal-bg"); 
var closeButton = document.querySelector(".close-button"); 
var openImg = document.querySelector(".open-img"); 

closeButton.addEventListener("click", function() { 
    modal.classList.toggle("closed"); 
    modalBg.classList.toggle("closed"); 
}); 

this.openImg.addEventListener("click", function() { 
    modal.classList.toggle("closed"); 
    modalBg.classList.toggle("closed"); 
});

在此先感謝。

來源

2017-02-23 Middi

嘗試這種解決方案：http://stackoverflow.com/questions/21700364/javascript-adding- click-event-listener-to-class –

您需要將每個open-img元素插入eventListener。

for (var i = 0; i < openImg.length; i++) { 
    openImg[i].addEventListener('click', function(){ 
    modal.classList.toggle("closed"); 
    modalBg.classList.toggle("closed"); 
    }) 
}

或使用ES6功能Array#from：

Array.from(openImg).forEach(v => v.addEventListener('click', function(){ 
    modal.classList.toggle("closed"); 
    modalBg.classList.toggle("closed"); 
}));

Codepen link

來源

2017-02-23 13:44:48

令人驚歎的，所以我只需要遍歷類來附加一個事件監聽器。謝謝@親愛的用戶。這對我來說肯定會有幫助。 – Middi

下面是基於代碼的解決方案。它並不完美，但它應該給你一個很好的起點：

// get all the matching elements 
var openImg = document.querySelectorAll(".open-img"); 

// iterate over them and add the handler for each of them 
openImg.forEach(function (image) { 
    image.addEventListener("click", function() { 
    // append the image to the modal 
    document.querySelector('.modal-main').appendChild(image.cloneNode(true)) 
    modal.classList.toggle("closed"); 
    modalBg.classList.toggle("closed"); 
    }); 
});

來源

2017-02-23 13:40:23 motanelu

開幕莫代爾從多個div元素

回答

相關問題