3

我遇到了一个小问题，我正在使用 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>
4

2 回答 2

5

我在你的代码中发现了一个问题。使用 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()
});
于 2013-07-29T21:15:41.387 回答
2

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

在初始化之前不能调用“刷新”

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

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

编辑 ：

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

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

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

  1. 将事件更改ready为此： 

    $(document).ready(mostrarValoresOpcionesGuardados);

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

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

尽管这适用于您的情况（因为您的小提琴中没有多个页面），但您必须尝试构建代码以通过pageinit事件运行。这边走，

  1. 您可以自定义伞下一页的所有标记。例如，您可以将页面内的点击事件、验证<button/>s、<input/>s绑定opciones到页面容器。这样一来，所有的控制都将得到简化和管理。
  2. 由于pageinit事件在DOM 准备好之前触发并且仅加载 DOM 的一部分，因此使用 DOM 更快ready。
  3. DOMready将初始化页面中的所有元素，如果您想使用ajaxjQM 的注入方法，这不是您想要的。Usingpageinit将仅加载正确的页面，并通过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();
});

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

于 2013-07-29T20:32:50.877 回答