如何用jQuery更新HTML Range控件？音乐播放器进度条不更新求助

问题根源 #

你用jQuery选择器$('#myProgressBar')拿到的是jQuery包装对象，不是原生DOM元素，直接访问.value属性无效——jQuery对象没有这个原生属性，得用jQuery提供的方法操作。另外，音频未加载完成时audioElement.duration会返回NaN，这时候计算进度会出错，需要提前判断。

修复方案 #

方案1：使用jQuery的.val()方法设置进度

把原生属性赋值改成jQuery的专用方法：

let myProgressBar = $('#myProgressBar');
audioElement.addEventListener('timeupdate',()=>{
    // 先判断音频时长是否有效，避免NaN导致计算错误
    if (isNaN(audioElement.duration)) return;
    var progress= parseInt((audioElement.currentTime/audioElement.duration)*100);
    myProgressBar.val(progress); // 用jQuery的val()方法更新进度条值
});

方案2：获取原生DOM元素后操作

如果习惯用原生DOM的.value属性，可以通过jQuery对象的[0]或.get(0)提取原生元素：

let myProgressBar = $('#myProgressBar')[0]; // 取出原生DOM元素
audioElement.addEventListener('timeupdate',()=>{
    if (isNaN(audioElement.duration)) return;
    var progress= parseInt((audioElement.currentTime/audioElement.duration)*100);
    myProgressBar.value = progress; // 直接使用原生value属性赋值
});

额外注意事项 #

• 确保audioElement已正确获取到页面中的<audio>元素，比如用document.getElementById('你的音频元素ID')或$('#你的音频元素ID')[0]（jQuery方式）。
• 音频加载需要时间，首次触发timeupdate事件时长可能未就绪，加isNaN判断能避免控制台报错，也防止进度条出现异常值。

内容的提问来源于stack exchange，提问作者Shreyansh Narayan