Question

我遇到了一些问题，我正在使用localstorage并且正在加载一个值，我的想法是滑块随着该值而变化。我得到了正确的加载部分，它加载了我想要的数字（我可以在警报中显示它，所以我知道是可以的），但是当试图将滑块添加到该数字时，它只保留dafult值（我尝试停用它，问题是一样的）。页面就绪时运行该方法这是代码：

function mostrarValoresOpcionesGuardados()
{

    var localStorageKey1 = "nombreUsuario";
    var localStorageKey2 = "pesoUsuario";
    var localStorageKey3 = "alturaUsuario";
    var localStorageKey4 = "edadUsuario";
    var nombre = localStorage.getItem(localStorageKey1);
    var peso = localStorage.getItem(localStorageKey2);
    var altura = localStorage.getItem(localStorageKey3);
    var edad = localStorage.getItem(localStorageKey4);
    $("#nombreUsuarioOpciones").val(nombre);
    $("#pesoUsuario").val(peso).slider("refresh"); //this doesn't work
    $("#alturaUsuario").val(altura);
    $("#edadUsuario").val(edad);
    alert(nombre+" "+peso+" "+altura+" "+edad);
};

我也这样试试： $("#pesoUsuario").val(peso); $("#pesoUsuario).slider("refresh")); 但它也没有用。这是滑块的div：

<div data-role="fieldcontain">
        <label for="pesoUsuario">
            Peso (kg)
        </label>
        <input id="pesoUsuario" type="range" name="pesoUsuario" value="95" min="0"
        max="200" data-highlight="true">
    </div>

Answer 1

我在你的代码中发现了一个问题。使用jQuery Mobile时，不应使用 document ready 。像往常一样，它会在jQuery Mobile在DOM中准备小部件之前触发。要解决此问题，您需要使用适当的jQuery Mobile页面事件。请阅读 ANSWER ，找出文档就绪与页面事件之间的区别。

工作示例：http://jsfiddle.net/Gajotres/k7C26/7/

改变这个：

$(document).ready(mostrarValoresOpcionesGuardados());

到此：

$(document).on('pagebeforeshow', '#opciones', function(){ 
    mostrarValoresOpcionesGuardados()
});

Answer 2

您的代码现在必须抛出错误：

初始化之前无法调用“刷新”

要解决这个问题（以及您的问题），您需要在slider之前初始化refresh，如下所示：

 $("#pesoUsuario").val(peso).slider().slider("refresh");

修改：

在您的代码中，您正在执行此操作：

$(document).ready(mostrarValoresOpcionesGuardados()); //2 times

()一定不在。原因是因为在jQuery中你将函数作为回调函数传递，而不是调用它。你必须做两件事：

将ready事件更改为：

$(document).ready(mostrarValoresOpcionesGuardados);

删除最后一行中的ready事件。

以下是演示：http://jsfiddle.net/k7C26/8/

虽然这适用于您的情况（因为您的小提琴中没有多个页面），但您必须尝试构建代码以便通过pageinit事件发挥作用。这方式，

您可以在伞下自定义一个页面的所有标记。例如，您可以将点击事件，<button/>页面<input/>页面内的opciones，ready的验证绑定到页面容器。这样，所有控件都将简化和管理。
Since pageinit event fires before DOM ready并且仅加载部分DOM，使用DOM ready的速度更快。
DOM ajax将初始化页面中的所有元素，如果您想使用jQM的pageinit注入方法，则不是您想要的。使用ajax只会加载正确的网页，并会通过$(document).on("pageinit", "#opciones", function () { //bind click event to page, delegate from there $(this).on('click', "#botonGuardarOpciones", guardarDatosOpciones); //call function which loads data from localStorage mostrarValoresOpcionesGuardados(); });加载其他网页。

以下是如何重新构建它：

{{1}}

这是一个演示：http://jsfiddle.net/hungerpain/k7C26/9/

Jquery Mobile，滑块在值更改后不会刷新

2 个答案: