使用javascript切換圖像

Question

我試圖通過單擊切換這些圖片。 JavaScript直接來自mozilla教程，所以我不確定它爲什麼不起作用，什麼都沒有發生。我正在開發cloud9。

我的HTML：

<img id="swagBunny" src="images/large.jpg" height="150" width="186" alt="Swaggy Bunny"/> 

我的Java腳本：

var myImage = document.querySelector('img'); 

$(function(){ 
    myImage.onclick = function() { 
     var mySrc = myImage.getAttribute('src'); 
     if(mySrc === 'images/large.jpg') { 
      myImage.setAttribute ('src','images/images.jpg'); 
     } else { 
      myImage.setAttribute ('src','images/large.jpg'); 
     } 
    }; 
}); 

Answer 1

不明白爲什麼它不工作。這裏是你的JavaScript的一個工作示例：

$(function(){ 
 
    var myImage = document.querySelector('img'); 
 
    myImage.onclick = function() { 
 
     var mySrc = myImage.getAttribute('src'); 
 
     if(mySrc === 'http://static.tumblr.com/1bd1b615e6da70dd71dc84fd2f47c80d/zpmncfu/oxNng9hfv/tumblr_static_95p88l86si88ks4w4wws04wk8.png') { 
 
      myImage.setAttribute ('src','https://cdn-insomniac.s3.amazonaws.com/emoji_sexface.png'); 
 
     } else { 
 
      myImage.setAttribute ('src','http://static.tumblr.com/1bd1b615e6da70dd71dc84fd2f47c80d/zpmncfu/oxNng9hfv/tumblr_static_95p88l86si88ks4w4wws04wk8.png'); 
 
     } 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="http://static.tumblr.com/1bd1b615e6da70dd71dc84fd2f47c80d/zpmncfu/oxNng9hfv/tumblr_static_95p88l86si88ks4w4wws04wk8.png" alt="Smiley face" height="42" width="42">