0

ボタンを作成するときに、いくつかの異なるものを含む 1 つの html ページを作成したいのですが、1 つの方法で行き詰まっていました。

jQuery は初めてで、ボタンを押した後に別の背景画像を表示したいと考えています。背景画像を2番目の「入力」から最初の「入力」の背景画像に変更したいのですが、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>

問題を解決する方法についていくつかの調査を行いましたが、経験が浅すぎます。

4

1 に答える 1

3

2つの問題

  1. これらは送信ボタンであるため、デフォルトのアクションが妨げられない場合、ページは更新されます
  2. スクリプトはヘッダーにあるため、DOM Ready ハンドラー内にラップする必要があります。そうしないと、スクリプトが実行されたときに、イベント ハンドラーをアタッチするターゲット要素を見つけることができません。

試す

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

デモ:フィドル

于 2013-11-07T04:08:15.857 に答える