重置动态更改的jQuery-mobile-Slider时出现奇怪的错误答案

【问题标题】：Strange error when resetting dynamically changing jQuery-mobile-Slider重置动态更改的jQuery-mobile-Slider时出现奇怪的错误
【发布时间】：2013-10-01 15:39:26
【问题描述】：

我目前正在开发一个使用 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>

【问题讨论】：

你能显示 HTML 标记吗？另外，请使用.prop() 而不是.attr()。
$("#positionSlider").attr("value", Number(time)).slider("refresh"); 到这个$("#positionSlider").val(Number(time)).slider("refresh"); jsfiddle.net/Palestinian/MrbYR
@MelanciaUK：见上文，'attr()' 和prop() 之间的区别是什么@Omar：谢谢 - 有效。让我感到困惑，但它正在工作。
不客气 :) api.jquery.com/val

标签： javascript jquery html jquery-mobile cordova

【解决方案1】：

用.val()代替.attr('value', value)，然后调用refresh方法。

Demo

$("#positionSlider").val(value).slider("refresh");

【讨论】：

【解决方案2】：

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

属性与属性

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

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

【讨论】：

谢谢。 RTFM 的一个案例:)