Question

我正在连续展示一些视频。

当第一个视频完成后，我会问用户一个问题，然后在回复后显示另一个视频。在第二个视频之后，我向用户提出最后一个问题。

问题是，当第二个视频结束时，.question-one和.question-two都会再次显示为block，因为看起来第一个on('ended..)方法的代码是被再次触发。

我尝试使用unbind删除视频中的绑定，但这并不起作用。

以下是我的代码。

HTML

<video>
   <source src="1.mp4" type="video/mp4">
</video>

JS

$('.video-one').bind('ended',function(){
    $(this).removeClass('video-one');
    $(this).addClass('video-two');
    $('#video-background').css('display', 'none');
    $('.question-one').fadeIn('slow');
    $('.video-one').unbind('ended');
});

$('.question-one').click(function(){
    $('.question-one').css('display', 'none');
    $('#video-background').css('display', 'block');
    $('video').attr('src', '2.mp4'); 
});

$('.video-two').bind('ended',function(){
    $(this).removeClass('video-two');
    $(this).addClass('video-three');
    $('#video-background').css('display', 'none');
    $('.question-two').fadeIn('slow');
    $('.video-two').unbind('ended');
});

我还缺少其他东西吗？

Answer 1

而不是改变像@Offbeatmammal这样的指令的顺序，我建议基于元素的ID来解除绑定事件，因为你想解除这个特定的绑定，特别是 - 不是每个人都有这个类。这只是语义上的原因。然后你必须在你的函数中添加一个事件参数，并且如果我记得的话，可以通过event.target.id获取id。

jQuery视频结束了很多视频

1 个答案: