jQuery toggle（）防止加載圖像

Question

我是jQuery的新手，發現切換功能真的很吸引人。我想要一個圖像的點擊後切換到不同的圖像，然後再返回，就像這樣：

$(document).ready(function() { 
    $("#expand").toggle(function(){ 
     $(this).attr("src","images/expandWidget.png"); 
    },function(){ 
     $(this).attr("src", "images/minimizeWidget.png"); 
    }); 
}); // end ready 

而且圖像本身聲明如下：

<img id="expand" src="images/minimizeWidget.png"></img></div> 

我注意到，當我跑這通過Chrome瀏覽器，圖像改爲：

<img id="expand" src="images/minimizeWidget.png" style="display: none;"> 

而且我的形象沒有顯示。 Chrome爲什麼要這樣做？如果我改變切換到click（），我的圖像顯示沒有問題，我可以切換到不同的圖像，但當然不會回來。我在控制檯中沒有錯誤，並且頁面不會導入會影響img的其他樣式。我是否正確使用切換？如果您需要更多信息，請告訴我。

謝謝

Answer 1

代替toggle使用.click()

LIVE DEMO

var images = ["images/expandWidget.png", "images/minimizeWidget.png"], c=0; 
$("#expand").click(function(){ 
    this.src = images[++c%2]; 
}); 

Answer 2

您誤解了jQuery切換的功能。

它'切換'元素的可見性，因此它消失。這並不是最好的名字，但我們都曾經在.click()之內編寫我們自己版本的切換方法。

參見文檔：

http://api.jquery.com/toggle/

你可能想是這樣的：

$("#expand").click(function(){ 
    if($(this).attr("src") == "images/expandWidget.png") { 
     $(this).attr("src", "images/minimizeWidget.png"); 
    } else { 
     $(this).attr("src","images/expandWidget.png"); 
    } 
});