Versuchen, eine pünktliche Update-Funktion zu erstellen

Question

Ich benutze Joomla, um eine Website zu erstellen, diese Website wird einen Bereich haben, in dem einige Titel-Vorschau verfügbar sein wird. Bis jetzt habe ich es geschafft, die Elemente zu erstellen und jedes einzeln zu spielen. Aber jetzt versuche ich, eine Funktion zu erstellen, die die Breite eines Divs abhängig von der Spielposition erhöht, aufgrund der dynamischen Erstellung auf dem PHP, muss ich eine dynamische Funktion erstellen, um dieses div zu vergrößern, hier ist was ich habe funktioniert nicht.

<audio preload="metadata" id="<?php echo $videoid; ?>" class="preview play" ontimeupdate='updateTrackTime(this);'> 
     <source src="<?php echo $video; ?>" type="audio/mp3"/> 
</audio> 
<div class="player play"> 
    <div id="<?php echo $videoid; ?>play" class="chargebar"></div> 
</div> 

Dies ist der php, dass der Spieler Dann habe ich eine kleine Funktion außerhalb der jQuery(document).ready( Funktion erstellt haben.

function updateTrackTime(track){ 
    var perc = Math.floor((track.currentTime/track.duration)*100).toString()+'%'; 
    var currTime = perc; 
    var trackid = jQuery(event.target).attr('id'); 
    trackid = trackid+'play'; 
    var currDiv = jQuery(trackid); 
    perc = 'width : '+perc; 
    if (currTime == '2%'){ 
     alert(trackid); 
     alert(currDiv.attr('id')); 
    } 
} 

Wie Sie sehen können, habe ich versucht, das Ding zu debuggen, um zu verstehen, was passiert. Die trackid Antworten richtig (exemple: HVOHfDJSOBRM), aber wenn ich für die Bestätigung bitten, dass er das Recht, „chargebar“ Div gefunden (currDiv) die Antwort ist undifined

Answer 1

Das Problem ist, dass Sie ein # hinzuzufügen vergessen zu Ihrem Argument zu jQuery, das anzeigt, dass Sie ein Element mit ID trackid auswählen möchten. More information.

ändern

var currDiv = jQuery(trackid); 

zu

var currDiv = jQuery('#' + trackid); 

Das sollte es beheben.

Zu einem anderen Hinweis: Sie verwenden var trackid = jQuery(event.target).attr('id');, während Variable event nirgendwo definiert ist (zumindest nicht in dem Code, den Sie hier zeigen). Anscheinend funktioniert es für Sie, aber ich schlage vor, dass Sie das zu var trackid = track.id; ändern, das einfach das ID-Attribut von der Spur liest, auf der das Zeitupdate ausgelöst wurde.