javascript - 尝试创建一个准时更新功能

Question

我正在使用 Joomla 创建一个网站，该网站将有一个部分提供一些轨道预览。到目前为止，我已经成功地创建了这些元素并单独播放了每个元素。但现在我正在尝试创建一个函数，根据播放位置增加 Div 的宽度，由于 PHP 上的动态创建，我需要创建一个动态函数来放大这个 div，这就是我所拥有的不起作用。

<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>

这是创建播放器的 php 然后我在 jQuery(document).ready( 之外创建了一个小函数功能。

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

正如你所看到的，我正在尝试调试该东西以了解发生了什么。 trackid答案正确(例如:HVOHfDJSOBRM)，但是当我要求确认他找到了正确的“chargebar”Div(currDiv)时，答案是undifined

Answer 1

问题是您忘记在 jQuery 的参数中添加 #，表明您想要选择 ID 为 trackid 的元素>。 More information .

改变

var currDiv = jQuery(trackid);

至

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

这应该可以解决问题。

另一个注意事项:您使用 var trackid = jQuery(event.target).attr('id'); 而变量 event 未在任何地方定义(至少不在您此处显示的代码中)。显然它适合您，但我建议您将其更改为 var trackid = track.id;，它只是从触发时间更新的轨道中读取 ID 属性。