javascript - Jquery 不会从按钮更改背景图像

Question

我想在创建按钮时创建一个包含一些不同内容的 html 页面，但我被困在一种方法中。

我是 jQuery 的新手，我想在按下按钮后显示不同的背景图像。 我想将第二个“输入”的背景图像更改为第一个“输入”的背景图像，其中，在 css 中:

.btn17{
    background-image: url('../Imagenes/trashc1.png');

}

.btn18{
    background-image: url('../Imagenes/trashc2.png');

}

和

<h:head>
   <title>Facelet Title</title>
    <link type="text/css" rel="stylesheet" href="CSS/Boton.css" />
    <script type="text/javascript" src="Javascript/jquery-1.9.1"/>
    <script type="text/javascript" src="Javascript/jquery-ui-1.10.3.custom"/>
    <script type="text/javascript">
        $('input:submit').on('click', function() {
            $(this).toggleClass('btn18 .btn17');
        });
    </script>
</h:head>
<h:body>
    <form>
        <input class="btn17" type="submit"  value=" "/>
    </form>
    <form>
        <input class="btn18" type="submit"  value=" "/>
    </form>
</h:body>

我研究了一些解决问题的方法，但是我太缺乏经验了。

Answer 1

两个问题

1. 因为这些是提交按钮，所以如果不阻止默认操作，页面将会刷新
2. 由于脚本位于 header 中，因此您需要将其包装在 dom 就绪处理程序中，否则在执行脚本时它将无法找到目标元素以附加事件处理程序

尝试

jQuery(function () {
    $('input:submit').on('click', function (e) {
        $(this).toggleClass('btn18 btn17');
        e.preventDefault()
    });
})

演示:Fiddle