事件委托帮助，我如何才能仅使用纯 Javascript 定位 <img> 标签？
我正在学习事件委托，我将点击事件放在主父级上，即缩略图。当我单击底部的图像时，我想将 src 设置为 img class="main" src，但我注意到当我在图像之间单击时，单击缩略图 div 上的其他任何位置，或者按 Tab 然后输入我得到空。我查看了一下，发现我的 event.target 目标是锚标记以及 div 类“缩略图”。我明白为什么，当我将点击事件放在缩略图（父级）上时，但是有没有办法我只能定位 img 标签？
请不要使用 jQuery，我想使用纯 js 来学习这个，谢谢！
function displaySelected() {
const getMainClass = document.querySelector('.main');
const getThumbnails = document.querySelector('.thumbnails');
getThumbnails.addEventListener('click', function(event) {
getMainClass.setAttribute('src', event.target.getAttribute('src'));
console.log(event.target);
});
}
displaySelected();
* {
box-sizing: border-box;
}
main {
min-width: 250px;
padding: 30px;
}
.hero {
height: 200px;
margin-bottom: 20px;
}
.hero img {
height: 100%
}
.thumbnail {
display: inline-block;
cursor: pointer;
height: 60px;
}
a.thumbnail:hover {
box-shadow: 5px 5px 5px gray;
}
.thumbnail img {
max-height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<main role="main">
<h1>Image Carousel</h1>
<div class="hero">
<img class="main" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat1.jpg" alt="An orange-eyed grey cat stretches toward the camera."/>
</div>
<div class="thumbnails">
<a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat1.jpg" alt="An orange-eyed grey cat stretches toward the camera."/></a>
<a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat2.jpg" alt="Closeup of a blue-eyed, grey cat with markings."/></a>
<a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat3.jpg" alt="An orange cat licks its paw."/></a>
<a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat4.jpg" alt="A content brown cat lounges with eyes closed."/></a>
</div>
心有法竹1回答
-
慕勒3428872
event listener您每次调用时都会添加function。您应该只添加event listener一次。检查tagName是否target为 an IMG，如果是，则设置src，否则不执行任何操作//Add the event listener once the DOM loadsconst getThumbnails = document.querySelector('.thumbnails');getThumbnails.addEventListener('click', function(event) { displaySelected(event);});//Check if the event target has tagName of IMGfunction displaySelected(event) { if(event.target.tagName === "IMG"){ const getMainClass = document.querySelector('img.main'); getMainClass.src = event.target.getAttribute('src'); }}{ box-sizing: border-box;}main { min-width: 250px; padding: 30px;}.hero { height: 200px; margin-bottom: 20px;}.hero img { height: 100%}.thumbnail { display: inline-block; cursor: pointer; height: 60px;}a.thumbnail:hover { box-shadow: 5px 5px 5px gray;}.thumbnail img { max-height: 100%;}<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title></head><body> <main role="main"> <h1>Image Carousel</h1> <div class="hero"> <img class="main" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat1.jpg" alt="An orange-eyed grey cat stretches toward the camera."/> </div> <div class="thumbnails"> <a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat1.jpg" alt="An orange-eyed grey cat stretches toward the camera."/></a> <a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat2.jpg" alt="Closeup of a blue-eyed, grey cat with markings."/></a> <a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat3.jpg" alt="An orange cat licks its paw."/></a> <a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat4.jpg" alt="A content brown cat lounges with eyes closed."/></a> </div> </main></body></html>
随时随地看视频慕课网APP
相关分类
JavaScript