有没有办法在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() {

 $('.menulink').click(function(){

   $("#bg").attr('src',"img/picture1.jpg");

   return false;

 });

});

我希望这段代码会很有用。

Answer 2

感谢您的所有答案！我只想在JS中完成它，这样CSS就不起作用了。欣赏答案，并一定会纳入未来的项目！

附言这就是最终完成它的原因。

window.onload = init;

function init() {

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

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

    blurryPics[i].onclick = clarify;

  }

function clarify(eventObj) {

  var pic = eventObj.target;

  var id = pic.id;

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

  pic.src = id;

  setTimeout(reBlur, 3000, pic);

}

function reBlur(eventObj) {

  var pic = eventObj.target;

  var id = pic.id;

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

  pic.src = id;

}

Answer 3

为此，我使用了一个if语句来检查第一个加载的图像文件是否存在。然后对文件使用属性 src。下面是一个示例。

#javascript

function magicChanger(){

    var myImage = document.getElementById("emailImage")

    if (myImage.getAttribute("src") == "first loaded image"){

        myImage.setAttribute("src", "second image")

    }

    else{

        myImage.setAttribute("src", "first loaded image")

    }

}

#html element

<button id = "emailButton" onclick="magicChanger()">

    <img id="emailImage" src="{% static 'GoEnigmaPics/emailIcon.png' %}" alt="email">

</button>

Answer 4

使用CSS会更好：你的图像保持不变，你只切换一个类，这个类让你的图像模糊。

document.getElementById("clickImg").addEventListener("click", function() {

    this.classList.toggle("blurImg")

})

.blurImg {

  -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */

  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() {

    document.getElementById("clickImg").src = document.getElementById("clickImg").getAttribute('origSrc')

})

var imgs = [

  'https://vignette.wikia.nocookie.net/spongebob/images/d/d7/SpongeBob_stock_art.png/revision/latest?cb=20190921125147',

  'https://static.vecteezy.com/system/resources/previews/000/072/351/non_2x/spongebob-squarepants-vector.jpg',

  'https://upload.wikimedia.org/wikipedia/en/c/c7/BattleForBikiniBottom.jpg'

]

document.getElementById("random").addEventListener("click", function() {

    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">