Jquery HTML5视频-时间更新和清理

我有一个HTML5视频，在jquery拖放元素位于正确的位置后显示和播放。当视频播放时，我有一个脚本，它会监听视频上的时间更新，并将拖动的元素背景颜色更改为高亮显示，然后根据时间恢复为原始颜色

现在的问题是，在完成后向后拖动视频时，如果代码为：

function play_vid(){
$("#slots").addClass('left');
$( "#element1" ).position({my: "left top",at: "left top",of: "#slot_1"});
$( "#element2" ).position({my: "left top",at: "left top",of: "#slot_2"});
$( "#element3" ).position({my: "left top",at: "left top",of: "#slot_3"});
$( "#element4" ).position({my: "left top",at: "left top",of: "#slot_4"});
$( "#element5" ).position({my: "left top",at: "left top",of: "#slot_5"});
$(".video").show();
$("#v1").show();
v1.play();
document.getElementById('v1').addEventListener("timeupdate", function() {
$("#element1").removeClass('correct');
$("#element1").addClass('highlighted');
if(this.currentTime > 15) {
$("#element1").removeClass('highlighted');
$("#element1").addClass('correct');
$("#element2").removeClass('correct');
$("#element2").addClass('highlighted');
}
    if(this.currentTime > 30) {
$("#element2").removeClass('highlighted');
$("#element2").addClass('correct');
$("#element3").removeClass('correct');
$("#element3").addClass('highlighted');
}
        if(this.currentTime > 45) {
$("#element3").removeClass('highlighted');
$("#element3").addClass('correct');
$("#element4").removeClass('correct');
$("#element4").addClass('highlighted');
}
            if(this.currentTime > 60) {
$("#element4").removeClass('highlighted');
$("#element4").addClass('correct');
$("#element5").removeClass('correct');
$("#element5").addClass('highlighted');
}
});

我怎样才能使擦洗视频只突出显示上述时间的元素

---

参见Fiddle at

不确定这是否是一个好的解决方案，但作为一个选项，如果您有一个明确列出每个元素在某个时间跨度内应该具有哪些类的结构，则可能更容易对此进行推理

var classesAtTime = {
    0 : { // starting at time 0 these elements should have these classes
        element1 : 'highlighted',
        element2 : '',
        element3 : ''
    },
    15 : { // starting at time 15 ...
        element1 : 'correct',
        element2 : 'highlighted',
        element3 : ''
    },
    30 : {
        element1 : 'highlighted',
        element2 : 'correct',
        element3 : 'highlighted'
    }
    // ... and so on
};

虽然这有点长，但很容易看出你在什么时候会处于什么状态。然后在您的timeupdate中，您可以使用类似这样的方法来选择此时哪些元素应该具有哪些类：

document.getElementById('v1').addEventListener("timeupdate", function() {
    var neededClasses = {};
    for (var i = 0; i <= this.currentTime; i++) {
        neededClasses = classesAtTime[i];
    }

    // Go through elements
    for (var elementID in classesAtTime) {
        if (!classesAtTime.hasOwnProperty(elementID)) continue;
        $('#' + elementID).attr('class', neededClasses[elementID]);
    }
}

document.getElementById（'v1'）.addEventListener（“时间更新”，函数（）{
var neededClasses={}；
对于（var i=0；我感谢Bemmu…这肯定是一种更好的处理方式，但我不确定这是否有助于解决清除问题。我对您的代码进行了修改，但它没有改变元素的类…抱歉，我应该使用伪代码或避免包含代码。我只是试图粗略地演示一下他的想法。谢谢你的帮助Bemmu…实际上，解决方案只是删除视频中所有不应在时间点突出显示的元素的突出显示类（而不仅仅是前一个元素）.因此，您将元素划分为时间段的想法值得作为答案。但仍需实施您的解决方案…请参阅更新的Fiddle