0

クリックするとクラスを切り替えるだけのjQueryコードを作成しようとしているので、1つはクラスビデオを含む2つの要素があり、もう1つはビデオの中央にあり、クリックするとクラスが切り替わります。それらの位置（クラスに関連しています）が、2回目にクリックすると、jQueryはクラスが変更されていないかのように動作します...以下はコードです：

$('.video-left').click(function(){
   $('.video-middle').addClass('video-left');
   $('.video-middle').removeClass('video-middle');
   $(this).addClass('video-middle');
   $(this).removeClass('video-left');
});
$('.video-middle').click(function(){alert('middle');});

したがって、最初に左クリックすると、現在残っているものがアラートをトリガーします。

4

4 に答える 4

4

$( '.video-left' ).click()クリックイベントのようなことをすると、クラスではなく要素にアタッチされます。つまり、要素のクラスが変更されても、イベントは要素自体にアタッチされているため、クリックイベントは変更されません。

この場合、イベントをクラス.on()にアタッチする場合は、ユーザーが要素をクリックするたびにセレクターが個別にチェックされるクラスを使用する必要があります。

$( document ).on( 'click', '.video-left', function(e) {
   // ...
});

（ビデオ要素の代わりに、ビデオ要素の任意の親を使用することもできますdocument。ただし、それらがどの時点でも変更されない場合に限ります。）

于 2012-04-19T10:48:46.823 に答える
0

クラスvideo-leftを両方の要素に追加し、クラス'video-middle'を追加します（'video-middle'をデフォルトで使用する要素に'video-left'とともに追加します。

<div class='video-left'></div>
<div class='video-left video-middle'></div> <!--default video middle -->

それで

$('.video-left').click(function(){
    $('.video-middle').removeClass('video-middle');
    $(this).addClass('video-middle');
}
于 2012-04-19T10:51:53.900 に答える
0

あなたはそれを間違っています

あなたがしていることは、要素にイベントを添付することです。あなたが想定しているように、クラスに要素を添付することはありません。

そして、要素をクリックするたびに、それは.videoでした-最初のclick（）にある関数が実行されたままになりました。同じもの

あなたがすべきことは、すべての要素にクラス「ビデオ」を追加し、共通のイベントを添付することです

$('.video').click(function(){
if($(this).hasClass('.video-left')) {do_something1();return} 
if($(this).hasClass('.video-middle')) {do_something2();return}
})
于 2012-04-19T10:49:37.667 に答える
0

'click'イベントを使用すると、永続的なセレクターがないため、video-left再バインドせずにクラスを削除すると、イベントが処理されなくなります。

$('.video-left').on('click', function(event) {
  $('.video-middle').addClass('video-left').removeClass('video-middle')
  $(this).addClass('video-middle').removeClass('video-left')
})


$('.video-middle').on('click', function(){ alert('middle'); })
于 2012-04-19T10:55:09.110 に答える