[英]How to add Event Listener on Multiple tag at once
我是 Javascript 新手。 我有我想在 main-img 上替換的圖像。 下面的代碼工作正常,但我只想知道如何通過在 Javascript 中使用更少的代碼來做到這一點。
<div id="container">
<div id="side-img">
<img id="side1" onclick="side1()" src="img1.jpeg">
<img id="side2" onclick="side2()" src="img2.jpeg">
<img id="side3" onclick="side3()" src="img3.jpeg">
<img id="side4" onclick="side4()" src="img4.jpeg">
</div>
<div id="main-img">
<img id="main" src="img0.jpeg">
</div>
</div>
<script type="text/javascript">
var sideimg = document.querySelectorAll('#side-img img');
var main = document.querySelector('#main');
function side1() {
main.src = sideimg[0].src;
}
function side2() {
main.src = sideimg[1].src;
}
function side3() {
main.src = sideimg[2].src;
}
function side4() {
main.src = sideimg[3].src;
}
</script>
您可以通過像這樣修改圖像標簽來簡化它:
<img id="side1" onclick="side(0)" src="img1.jpeg">
<img id="side2" onclick="side(1)" src="img2.jpeg">
<img id="side3" onclick="side(2)" src="img3.jpeg">
<img id="side4" onclick="side(3)" src="img4.jpeg">
並刪除 JS 腳本中的所有 side() 函數並添加此函數:
var sideimg = document.querySelectorAll('#side-img img');
var main = document.querySelector('#main');
function side(index) {
main.src = sideimg[index].src;
}
您可以以編程方式為每個圖像附加一個 onclick 處理程序。
document.querySelectorAll('img').forEach((img) => { img.onclick = () => { console.log(img.src) document.querySelector('#main').src = img.src } })
<div id="container"> <div id="side-img"> <img id="side1" src="img1.jpeg"> <img id="side2" src="img2.jpeg"> <img id="side3" src="img3.jpeg"> <img id="side4" src="img4.jpeg"> </div> <div id="main-img"> <img id="main" src="img0.jpeg"> </div> </div>
我建議:
// retrieving the common ancestor element of the <img> elements:
let sideImage = document.querySelector('#side-img'),
// defining a named function, using arrow syntax; 'e' is a reference
// to the event object, passed automatically from the
// EventTarget.addEventListener() method:
imageChange = (e) => {
// we retrieve the element with the 'id' of 'main', and update
// its src property to be that of the clicked element;
// e.target retrieves the element upon which the event was
// originally triggered:
document.getElementById('main').src = e.target.src;
};
sideImage.addEventListener('click', imageChange);
let sideImage = document.querySelector('#side-img'), imageChange = (e) => { document.getElementById('main').src = e.target.src; }; sideImage.addEventListener('click', imageChange);
<div id="container"> <div id="side-img"> <img id="side1" src="https://via.placeholder.com/100.png?text=image1"> <img id="side2" src="https://via.placeholder.com/100.png?text=image2"> <img id="side3" src="https://via.placeholder.com/100.png?text=image3"> <img id="side4" src="https://via.placeholder.com/100.png?text=image4"> </div> <div id="main-img"> <img id="main" src="img0.jpeg"> </div> </div>
關於評論中留下的問題,OP:
您能否向我解釋容器
#side-img
如何循環遍歷每個圖像並向它們添加事件偵聽器?
當然,在這種情況下,我們利用事件通過 DOM 冒泡的方式使用了事件委托。
我們沒有將事件偵聽器綁定到多個<img>
元素,而是利用了事件在 DOM 中冒泡的方式; 這意味着我們在click
事件到達#side-img
監聽它,並查看Event
對象的target
屬性以找到最初觸發事件的元素。
參考:
包含委托的版本
JS
const viewer = document.querySelector('#main');
document.addEventListener('click', (event) => {
if (typeof event.target.hasAttribute('data-clickable') && event.target.src) {
viewer.src = event.target.src;
}
})
HTML
<div id="container">
<div id="side-img">
<img id="side1" data-clickable src="img1.jpeg">
<img id="side2" data-clickable src="img2.jpeg">
<img id="side3" data-clickable src="img3.jpeg">
<img id="side4" data-clickable src="img4.jpeg">
</div>
<div id="main-img">
<img id="main" src="img0.jpeg">
</div>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.