-3

機能が正しく動作していません。うまくいくときもあればうまくいかないときもある

<head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>

<script type="text/javascript">


$(function(){

    $('label').click(function(){
    $(this).toggleClass('jaja papa')
    }   )


    })

</script>

</head>

<body>

<label class="jaja">
<input type="checkbox" />
click
</label>

</body>
4

3 に答える 3

1

考えられる解決策の 1 つは、マークアップを少し変更することです (IMHO を改善するため)。

ラベルを変更して、チェックボックスとテキストのスパンを持つようにし、代わりにスタイルを適用する場合:

<label>
    <input type="checkbox">
    <span class="papa">Test</span>
</label>

次に、このjQueryが機能します：

$('label>:checkbox').click(function(){
    $(this).next('span').toggleClass('jaja papa')
});

実際の例: http://jsfiddle.net/JHwBP/

ここでの利点は、よりアドレス指定可能な HTML があることです (ラベル内のチェックボックスとは別にテキストにアクセスできます)。また、テキストをクリックするセマンティクスは、チェックボックスをチェック/チェック解除します。

于 2012-08-23T10:09:21.927 に答える
1

ラベルをクリックすると、それがラベルの機能であるため、チェックボックスもクリックされます。次に、チェックボックスのクリック イベントがラベルまでバブルアップします。そのため、ラベルのクリック ハンドラーが 2 回起動され、クラスが 2 回切り替えられ、事実上何も行われません。

クリック ハンドラーが呼び出され、初回のみ動作する回数を追跡する必要があります: http://jsfiddle.net/ZVCM5/2/。

$('label').click(function f(e) {
    if(!f.triggered) {  // only if not already triggered for this time
        f.triggered = true;
        $(this).toggleClass('jaja papa');
        setTimeout(function() {
            f.triggered = false;  // reset after both clicks are done
        }, 0);
    }
});
于 2012-08-23T10:07:06.810 に答える
0

これらの 2 つのクラスを切り替えたい場合

$('label').click(function(){
    $(this).toggleClass('jaja').toggleClass('papa');
    });

やるべき

于 2012-08-23T09:58:38.000 に答える