1

我目前正在开发一个使用 jQuery-Mobile 的网络应用程序。我从服务器中提取更新用户界面功能（曲目的时间和长度）中的数据，并使用它们来显示音乐曲目中的当前位置（时间是滑块的值，长度是最大值）。这工作正常。

如果用户跳到上一个曲目，它会变得很奇怪。您会期望，由于 update-ui-function 每秒运行一次，因此滑块会完全重置。然而事实并非如此。它会向后跳一点，但不会跳到最后，之后也不会更新。既然一张图值一百个字：

滑块是否正常工作

滑块是否正常工作

用户跳转到上一首曲目后的滑块

用户跳转后的滑块

再说一遍：我的问题是滑块没有重置并且它停止移动，即使 update-ui-function 确实正确更新了两个时间显示。

以下是滑块的更新方式：

//Get the current position (time)
$(this).find("time").each(function(){
    time = $(this).text();
});

//And the total length (time)
$(this).find("length").each(function(){
    length = $(this).text();
});

//Set slider and ps
$("#positionSlider").attr("max", length);
$("#positionSlider").attr("value", Number(time)).slider("refresh");

//The time-displays which are updatet correctly
$("#currentTime").text(format_time(time));
$("#totalTime").text(format_time(length));

我尝试在更新之前重置 max- 和 value- 属性，但这只会导致滑块完全停止工作。删除滑块并将其重新附加到我的 DOM 搞砸了我的 css。

任何帮助或想法表示赞赏。

编辑：HTML标记

<div id="position">
    <input id="positionSlider" class="ui-hidden-accessible" type="range" name="slider-mini" id="slider-mini" value="0" min="0" max="100" data-highlight="true" data-mini="true" />
    <p id="currentTime">00:00:00</p><p id="totalTime">00:00:00</p>
</div>
4

2 回答 2

1

使用.prop()代替.attr()：

属性与属性

属性和属性之间的区别在特定情况下可能很重要。在 jQuery 1.6 之前，.attr() 方法在检索某些属性时有时会考虑属性值，这可能会导致行为不一致。从 jQuery 1.6 开始，.prop() 方法提供了一种显式检索属性值的方法，而 .attr() 检索属性。例如，应使用 .prop() 方法检索和设置 selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked 和 defaultSelected。在 jQuery 1.6 之前，可以使用 .attr() 方法检索这些属性，但这不在 attr 的范围内。这些没有对应的属性，只是属性。

来源：http ://api.jquery.com/prop/

于 2013-10-01T16:05:49.147 回答
1

而不是.attr('value', value)使用.val()，然后调用refresh方法。

演示

$("#positionSlider").val(value).slider("refresh");
于 2013-10-01T16:08:20.077 回答