0

我正在尝试编写一个 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');});

所以如果我先点击左，那么现在剩下的会触发警报。

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-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');
}
于 2012-04-19T10:51:53.900 回答
0

你做错了

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

每次单击元素时， .video-left 都会执行第一次 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

通过使用“单击”事件，您没有持久选择器，因此当您删除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 回答