addClass removeClass bugs jQuery

Question

我正在尝试写一个jQuery代码，简单地切换类点击，所以我有两个元素，一个类视频-离开另一个视频中间，点击他们切换类，这是在火灾错误的类切换以及它们的位置(这是与类相关的)，但当我第二次点击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');});

因此，如果我先单击left，然后再单击现在剩下的内容，则会触发警报。

Answer 1

当您执行诸如$( '.video-left' ).click()之类的操作时，单击事件被附加到元素，而不是类。也就是说，如果元素的类发生更改，则click事件不会更改，因为该事件是附加到元素本身的。

在这种情况下，当您想要将事件附加到一个类时，您应该使用.on()，它在用户每次单击元素时都会单独选中选择器。

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

(您还可以使用视频元素的任何父元素，而不是document，前提是它们在任何时候都不会更改。)

Answer 2

你做错了吗？

您所要做的是将事件附加到元素，而不是像您想象的那样将元素附加到类

每次单击该元素时，都会执行.video-left驻留在first click()中的函数。一样的

你应该做的是将类"video“添加到所有元素中，并附加公共事件

$('.video').click(function(){
if($(this).hasClass('.video-left')) {do_something1();return} 
if($(this).hasClass('.video-middle')) {do_something2();return}
})

Answer 3

将类video-left添加到两个元素中，并将类“video-middle”(连同“video-left”一起添加到您希望“video-middle”默认设置的元素中。

<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');
}