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

两个问题

由于这些是提交按钮，如果未阻止默认操作，页面将会刷新
由于脚本在标题中，您需要将其包装在dom ready handler中，否则当脚本执行时，它将无法找到附加事件处理程序的目标元素

尝试

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

演示：Fiddle

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

1 个答案: