尝试使用 JavaScript 将图像源从 images/small/更改为 images/medium/
我已经尝试了以下代码,但由于某种原因,点击事件没有被拾取,感谢您对此的任何帮助。
Javascript
var thumbs = document.getElementById("thumbnails");
thumbs.addEventListener("click", function (i) {
if (i.target.nodeName.toLowerCase() == "img") {
// get image filename of clicked thumbnail
var clickedImageSource = i.target.src;
// replace the folder name of the image
var newSrc = clickedImageSource.replace("small","medium");
}
});
HTML
<div id="thumbnails">
<img src="images/small/Home.jpg" title="Home" />
<img src="images/small/Office.jpg" title="Office" />
<img src="images/small/Park.jpg" title="Park" />
<img src="images/small/Hills.jpg" title="Hills" />
<img src="images/small/HaveEyes.jpg" title="HaveEyes" />
</div>
最佳答案
在 DOM 元素可用之前,您不能附加事件监听器。
<script>
// executed before dom is ready.
var thumbs = document.getElementById("thumbnails");
thumbs.addEventListener("click", function(i) {
console.log('clicked');
});
</script>
<div id="thumbnails">
<img src="images/small/Home.jpg" title="Home" />
<img src="images/small/Office.jpg" title="Office" />
<img src="images/small/Park.jpg" title="Park" />
<img src="images/small/Hills.jpg" title="Hills" />
<img src="images/small/HaveEyes.jpg" title="HaveEyes" />
</div>
<script>
// executed after dom is ready.
var thumbs = document.getElementById("thumbnails");
thumbs.addEventListener("click", function(i) {
console.log('clicked');
});
</script>
关于Javascript 图片源更改 addEventListener "click"事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49042044/