javascript - 使用clickToggle并在单击另一个元素时关闭元素

我根据对Felix Kling's的click toggle响应编写了此代码。我想知道是否有更好的编写方式，以及当单击另一个元素时如何关闭它。

我正在用它来单击时播放视频的某些点，并在单击时将其关闭。

我编写了一个函数来关闭类的转义，但是它会减慢速度并中断事件的完成。

$(document).on('keydown', function(e) {
    if(e.keyCode == 27) {
        var buttons = $("button");
        if ( buttons.hasClass("open") ) {
            myVideo.currentTime = 2.8;
            myVideo.play();
            setTimeout(function() {
                myVideo.pause();
            }, 540);
            buttons.removeClass("open");
        }
    }
})


var myVideo = document.getElementById("video");

$("#button-1").clickToggle(function() {
    myVideo.currentTime = 2;
    myVideo.play();
    $(this).addClass("open");
    setTimeout(function() {
        myVideo.pause();
    }, 900);
}, function() {
    myVideo.currentTime = 2.8;
    myVideo.play();
    setTimeout(function() {
        myVideo.pause();
    }, 540);
});

$("#button-2").clickToggle(function() {
    myVideo.currentTime = 3.05;
    myVideo.play();
    setTimeout(function() {
        myVideo.pause();
    }, 850);
}, function() {
    myVideo.currentTime = 3.8;
    myVideo.play();
    setTimeout(function() {
        myVideo.pause();
    }, 680);
});

最佳答案

好吧，对于在正确的位置暂停视频的更可靠方法，您可以收听timeupdate事件：

myVideo.addEventListener("timeupdate", function(){
    if(myVideo.currentTime >= 2.9) {
        myVideo.pause();
    }
});

当然，当您开始播放下一个片段时，您不希望该侦听器继续执行。您可以删除该侦听器，然后将其替换为下一个段的新侦听器。或者，您可以将视频的开始和结束时间存储在这样的数组中：

var videoSegments = [
        { startTime: 2, endTime: 2.9},
        { startTime: 2.8, endTime: 3.34},
        { startTime: 3.05, endTime: 3.9},
        { startTime: 3.8, endTime: 4.48}
    ];

现在，您只能使用一个侦听器：

myVideo.addEventListener("timeupdate",function(){
    if(myVideo.currentTime >= videoSegments[currentSegment].endTime) myVideo.pause();
});

如果clickToggle函数执行以下操作，则您也不需要onclick：

$(button).click( function() {

     ...other stuff here...

     currentSegment++;
     myVideo.currentTime = videoSegments[currentSegment].startTime;
     myVideo.play();
});

每次单击时，它将视频前进到下一个片段并播放。当视频到达正确的位置时，听众将停止视频。

这是一个工作示例：http://jsfiddle.net/w30j2acc/2/