1

jquery のドラッグ アンド ドロップ要素が正しいスロットに配置された後に表示および再生される HTML5 ビデオがあります。ビデオの再生中に、ビデオの timeupdate をリッスンし、ドラッグされた要素の背景色をハイライトに変更し、時間に応じて元の色に戻すスクリプトがあります。

問題は、終了後にビデオを後方にスクラブすると、コードが次の場合にドラッグされた要素がすべて強調表示されることです。

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');
}
});

ビデオをスクラブすると、上記の時間に従って要素のみが強調表示されるようにするにはどうすればよいですか?

http://jsfiddle.net/7YW59/で Fiddle を参照してください。

4

1 に答える 1

2

これが良い解決策かどうかはわかりませんが、特定の期間に各要素が持つべきクラスを明示的にリストする構造がある場合、1 つのオプションとして、これについて簡単に推論できます。

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]);
    }
}

何かに複数のクラスが必要な場合は、たとえば element1 : 'highlighted foo bar' のようにリストできます。

于 2013-05-15T02:34:56.150 に答える