改變中 <img> 用javascript標記src

Question

我一直在嘗試使用javascript更改我制作的網頁上的圖像。 到目前為止，當我單擊原始圖像時，我的代碼根本不執行任何操作。 這是我第一次在html文檔中使用JS進行實驗，因此我可以簡單地了解如何使用它。

<h1>heading name</h1>
<div>
    <img alt="alt text"title='hover over text'id='chango'src="images/rsz_josh.jpg"onclick="changeImage()"/>
    <script language="javascript">
        var changeImage = function(){
            img1="images/rsz_josh.jpg";
            img2="images/rsz_josh2.jpg";
            img3="images/rsz_josh3.jpg";

            switch(document.getElementById('chango').src){
                case img1:
                    document.getElementById("chango").src=img2;
                break;
                case img2:
                    document.getElementById("chango").src=img3;
                break;
                default:
                    document.getElementById("chango").src=img1;
                break;
            };
        };
    </script>
</div>

Answer 1

原因是document.getElementById('chango').src返回圖像的絕對URL，而不是相對URL。 因此，沒有任何case語句匹配。

解決問題的方法是將URL切成斜杠，然后比較文件名而不添加任何路徑。

編輯：一種更簡單的方法是使用JavaScript的indexOf來查看URL是否包含字符串。 假定所有圖像名稱都不是其他圖像名稱的子字符串。

var changeImage = function(){ 
img1 = "rsz_josh.jpg"; 
img2 = "rsz_josh2.jpg"; 
img3 = "rsz_josh3.jpg"; 
console.log(document.getElementById('chango').src);

imgUrl = document.getElementById('chango').src

if (imgUrl.indexOf(img1) != -1) {
    document.getElementById("chango").src = 'images/' + img2; 
}
else if (imgUrl.indexOf(img2) != -1) {
    document.getElementById("chango").src = 'images/' + img3; 
}

else {
    document.getElementById("chango").src = 'images/' + img1; 
}