使用事件監聽器更改圖像

Question

我有兩個圖像： images/pic1.png和images/pic2.png 。 我想做這樣的事情：第一次單擊image（pic1）時，它將其src更改為images/pic2.png ，然后顯示第二個圖像。 接下來，我再次單擊（第二次），然后再次顯示我的第一張圖像。 如果我第三次單擊，我的第二張img將再次顯示。 一遍又一遍。

另外，我想通過循環if(...) ... else{...} 。

這是我的代碼：

HTML

<img src="images/pic1.png" id="myImage"/>

JS

var img = document.getElementById("myImage");
img.addEventListener("click", function(){
  if(img.src != "images/pic2.png"){
    img.src = "images/pic2.png";}
  else{
    img.src = "images/pic1.png";}});

我不知道該怎么辦...

Answer 1

這是一個工作示例，顯示您的代碼工作正常。 除非您因絕對VS相對URL而遇到問題。

 var img = document.getElementById("myImage"); img.addEventListener("click", function(){ if(img.src != "http://placehold.it/350x150/ff0000"){ img.src = "http://placehold.it/350x150/ff0000";} else{ img.src = "http://placehold.it/350x150";}}); 

 <img src="http://placehold.it/350x150" id="myImage"/> 

Answer 2

我創建了這個小jsfiddle

<img id='myImg' width='40px' height='40px' src="//i.imgur.com/COFscX6.jpg" />

var img = document.getElementById("myImg");
img.addEventListener("click", function() {
  if (this.classList.contains('changed')) {
    this.src = '//i.imgur.com/COFscX6.jpg';
    this.className = "";
  } else {
    this.className = "changed";
    this.src = "//i.imgur.com/rznnhRq.jpg";
  }
});

Answer 3

另一種方法是使用dataset屬性作為id。

這樣一來，您還可以在更多圖像之間進行切換。

 function toggle(){ img.src='images/pic'+( img.dataset['id']=img.dataset['id']++<2?img.dataset['id']:1 )+'.png'; img.alt='images/pic'+(img.dataset['id'])+'.png'; } var img=document.getElementById('myImage'); img.onclick=toggle; 

 <img src="images/pic1.png" data-id="1" id="myImage"> 

在上述情況下，2為最大值，1為第一張圖像

img.dataset['id']=img.dataset['id']++< 2 ?img.dataset['id']: 1

讀：

if( img.dataset['id']<2 ){
 img.dataset['id'] + 1;
}else{
 img.dataset['id'] = 1;
}

Answer 4

HYG，您需要先清空src，然后再插入新的

 var img = document.getElementById("myImage"); img.addEventListener("click", function(){ console.log(img.src); if(img.src != "https://placeholdit.imgix.net/~text?txtsize=33&txt=pic2"){ console.log("not true"); img.src = ""; console.log(img.src); img.src="https://placeholdit.imgix.net/~text?txtsize=33&txt=pic2"; } else{ img.src = "https://placeholdit.imgix.net/~text?txtsize=33&txt=pic1";}}); 

 <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=pic1" id="myImage"/>