单击时使用图像作为按钮并切换图像

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

这应该给我一个按钮，该按钮最初是一个右箭头，每次点击时都会在左右之间切换。

编辑：我应该提到我描述的第二种方法只会显示默认的“提交查询”文本，显示为无图片。

提前致谢。

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

我希望这会有所帮助。