使用图片作为按钮并点击切换图片

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'); 
    }); 
}); 

我希望这会有所帮助。