使用圖片作爲按鈕並點擊切換圖片

Question

我發現了很多關於如何解決這個問題的方法，但我似乎無法得到它的工作。我想使用具有按鈕功能的圖像。下面的代碼運行良好，但既不是很好的風格，也不能切換它使用的圖像。

<input type="image" id="mToggle" src="images/chevronright.jpg" width="48" height="48"></input> 

我應該能夠做到像下面這樣：

HTML

<input type="image" id="mToggle" class="right" width="48" height="48"></input> 

CSS

.left{ 
    background-image: url("images/chevronLeft.jpg"); 
} 

.right{ 
    background-image: url("images/chevronRight.jpg"); 
} 

的JavaScript

$("#mToggle").click(function(){ 
    $('#mToggle').toggleClass('left'); 
}); 

這應該給我一個按鈕，最初是一個正確的方向，並在點擊左邊和右邊，每次之間將交換。

編輯：我應該提到，我所描述的第二種方法只會導致默認的「提交查詢」文字出現在No圖片中。

在此先感謝。

Answer 1

見你的代碼Working fiddle：

HTML：

<input type="image" id="mToggle" class="right" width="64" height="64" value=' '></input> 

JS：

只需添加ready功能可按$(function(){ });指定一個函數來執行當DOM完全加載時。

$(function(){ 
    $("#mToggle").click(function(){ 
     $('#mToggle').toggleClass('left right'); 
    }); 
}); 

我希望這會有所幫助。