0

i want to create one html page with some different stuff when i create a button, but i was stuck in one method.

I´m new to jQuery and I want to show a different background image after the button is pressed. I want change the background image from the second "input" to the background image from the first "input", where, in the css:

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

}

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

}

And

<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>

I did some research for ways to resolve the problem, but I am too inexperienced.

4

1 回答 1

3

两个问题

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

尝试

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

演示：小提琴

于 2013-11-07T04:08:15.857 回答