[英]Javascript image source change addEventListener “click” event
嘗試使用JavaScript將圖片來源從images / small /更改為images / medium /
我已經嘗試了以下代碼,但是由於某些原因,沒有選擇click事件,感謝對此的任何幫助。
使用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.