我有一个 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');
}
});
如何才能使擦洗视频仅突出显示上述时间的元素?