0

play要素をクリックすると、css が適切に処理できるクラスが追加されます。次のクリックでクラスを削除したいのplayですが、それは望んでいません。

私は何を間違っていますか？また、どうすればもっとうまくできますか？

ありがとうございました

<span class="icon small-player-icons pause" style="display: inline;">click here</span>

$('.small-player-icons.pause').on('click',function(){
    $(this).addClass('play');
});
$('.small-player-icons.pause.play').on('click', function(){
    alert("clicked");
    $(this).removeClass('play');
});

span.small-player-icons.pause {
    background-color:green;
    padding:10px;
}
span.small-player-icons.play {
    background-color:orange;
}

ここにフィドルがあります

4

3 に答える 3

2

これは、ページの読み込み時に'.small-player-icons.pause.play'ドキュメントにクラスの要素がないため、クエリがサイレントに失敗するため、イベントを委任する必要があります。

$(document).on('click', '.small-player-icons.pause.play', function(){
    alert("clicked");
    $(this).removeClass('play');
});

しかし、クラスを追加/削除するためだけに 2 つのハンドラーを使用しているので、toggleClass()メソッドを使用しないのはなぜですか?

$('.small-player-icons.pause').on('click',function(){
    $(this).toggleClass('play');
});
于 2013-09-14T23:30:06.050 に答える
1

実際の例:

$('.small-player-icons.pause').on('click',function(){
    if($(this).hasClass('play')){
        alert("clicked");
        $(this).removeClass('play');
    }
    else{
        $(this).addClass('play');
    }
});

JSFiddle

于 2013-09-14T23:31:54.440 に答える