有没有办法在on.click src更改事件后将图像src切换回原始图像？

Question

我是一个新手，我自己学习JavaScript并使用一些资源，但我想自己探索一些东西，因此尝试这个东西，但由于某种原因它不起作用。感谢您的帮助。

目的是通过交换源来澄清一些模糊的图像。这些图像被称为零.jpg/零模糊.jpg，一.jpg/一模糊.jpg等等...页面加载模糊的图像源，直到单击。我想编写代码，以便在5秒后返回原始模糊的源图像。

P.S.：注释中的代码是我自己试图编写的。

window.onload = init;

function init() {

  var blurryPic = document.getElementsByTagName("img");

  for (var i = 0; i < blurryPic.length; i++) {

    blurryPic[i].onclick = clarify;

    // setTimeout(resetPic, 5000);

  }

}

function clarify(eventObj) {

  var pic = eventObj.target;

  var id = pic.id;

  id = "images/" + id + ".jpg";

  pic.src = id;

}

// function resetPic(eventObj) {

//   var pic = eventObj.target;

//   var id = pic.id;

//   id = "images/" + id + "blur.jpg";

//   pic.src = id;

// }

Answer 1

请尝试此代码，到 有没有办法在on.click src更改事件后将图像src切换回原始图像？它会切换回来，因为默认情况下，当您单击链接时，它会跟随链接并加载页面。就您而言，您不希望这样。您可以通过执行 e.prevent默认（）;$(function() {&nbsp;$('.menulink').click(function(){&nbsp; &nbsp;$("#bg").attr('src',"img/picture1.jpg");&nbsp; &nbsp;return false;&nbsp;});});我希望这段代码会很有用。

Answer 2

感谢您的所有答案！我只想在JS中完成它，这样CSS就不起作用了。欣赏答案，并一定会纳入未来的项目！附言这就是最终完成它的原因。window.onload = init;function init() {&nbsp; var blurryPics = document.getElementsByTagName("img");&nbsp; for (var i = 0; i < blurryPics.length; i++) {&nbsp; &nbsp; blurryPics[i].onclick = clarify;&nbsp; }function clarify(eventObj) {&nbsp; var pic = eventObj.target;&nbsp; var id = pic.id;&nbsp; id = "images/" + id + ".jpg";&nbsp; pic.src = id;&nbsp; setTimeout(reBlur, 3000, pic);}function reBlur(eventObj) {&nbsp; var pic = eventObj.target;&nbsp; var id = pic.id;&nbsp; id = "images/" + id + "blur.jpg";&nbsp; pic.src = id;}

Answer 3

为此，我使用了一个if语句来检查第一个加载的图像文件是否存在。然后对文件使用属性 src。下面是一个示例。#javascriptfunction magicChanger(){&nbsp; &nbsp; var myImage = document.getElementById("emailImage")&nbsp; &nbsp; if (myImage.getAttribute("src") == "first loaded image"){&nbsp; &nbsp; &nbsp; &nbsp; myImage.setAttribute("src", "second image")&nbsp; &nbsp; }&nbsp; &nbsp; else{&nbsp; &nbsp; &nbsp; &nbsp; myImage.setAttribute("src", "first loaded image")&nbsp; &nbsp; }}#html element<button id = "emailButton" onclick="magicChanger()">&nbsp; &nbsp; <img id="emailImage" src="{% static 'GoEnigmaPics/emailIcon.png' %}" alt="email"></button>

Answer 4

使用CSS会更好：你的图像保持不变，你只切换一个类，这个类让你的图像模糊。document.getElementById("clickImg").addEventListener("click", function() {&nbsp; &nbsp; this.classList.toggle("blurImg")}).blurImg {&nbsp; -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */&nbsp; filter: blur(5px);}<img src="https://www.muralsticker.com/23751-thickbox/autocollants-en-vinyle-pour-enfants-spongebob-squarepants.jpg" id="clickImg">如果你真的想要的是能够重置原始图像，我认为最好将其存储在特定属性中，如下所示：document.getElementById("reset").addEventListener("click", function() {&nbsp; &nbsp; document.getElementById("clickImg").src = document.getElementById("clickImg").getAttribute('origSrc')})var imgs = [&nbsp; 'https://vignette.wikia.nocookie.net/spongebob/images/d/d7/SpongeBob_stock_art.png/revision/latest?cb=20190921125147',&nbsp; 'https://static.vecteezy.com/system/resources/previews/000/072/351/non_2x/spongebob-squarepants-vector.jpg',&nbsp; 'https://upload.wikimedia.org/wikipedia/en/c/c7/BattleForBikiniBottom.jpg']document.getElementById("random").addEventListener("click", function() {&nbsp; &nbsp; document.getElementById("clickImg").src = imgs[Math.floor(Math.random() * 3)]})<input type="button" value="RESET" id="reset" /><input type="button" value="RANDOM" id="random" /><br/><img src="https://www.muralsticker.com/23751-thickbox/autocollants-en-vinyle-pour-enfants-spongebob-squarepants.jpg" origSrc="https://www.muralsticker.com/23751-thickbox/autocollants-en-vinyle-pour-enfants-spongebob-squarepants.jpg" id="clickImg">