Question

我正把头撞到一堵砖墙上。我的猜测是，这是一个关于什么是第一的问题，但我似乎无法弄清楚这应该发生的顺序。

基本情景：这是一个PhoneGap应用程序（但这特别是一个JavaScript问题）。一个index.html文件和一个.js文件，用于向运行到数据库的PHP文件发送ajax调用，并返回要在应用程序中使用的信息。

jQuery和jQuery Mobile也被使用，所以index.html被分解为我可以在它们之间来回转换的页面元素（这可能是相关的）

到目前为止一切顺利。登录后，用户进入一个页面，其中运行设置间隔函数，该页面使用ajax查询php，然后数据库获取答案并将其发送回链中并执行操作。

其中一个动作是“Gee whiz有一个新问题，我会将所有变量设置到本地存储中，然后通过以下方式更改页面：

$.mobile.changePage("#pageX", {transition:"slide", changeHash:false});

现在我有一个运行.on的功能（“pagebeforeshow”：

$(function () {
    $(document).on("pagebeforeshow", "#pageX", function () { 
        document.getElementById("username").innerHTML = window.localStorage.getItem("username");
        document.getElementById("score").innerHTML = window.localStorage.getItem("score");
        document.getElementById("category").innerHTML = window.localStorage.getItem("category");
        document.getElementById("mob_question_question").innerHTML = window.localStorage.getItem("mob_question_question");      
        return false;
    });
});

这一切都有效。

现在我在.html中有一个棘手的位，包含一个输入类型=“提交”的四个表单：

<form id="question1"><input id="answer1" type="submit" value="" data-transition="slide" data-theme="a"></form>
<form id="question2"><input id="answer2" type="submit" value="" data-transition="slide" data-theme="a"></form>
<form id="question3"><input id="answer3" type="submit" value="" data-transition="slide" data-theme="a"></form>
<form id="question4"><input id="answer4" type="submit" value="" data-transition="slide" data-theme="a"></form>

这就是背景，现在是问题。我希望将按钮的值设置为在ajax调用中发送的答案（我已经检查以确保正在发送正确的信息）

我似乎无法在pagebeforeshow函数中实现任何JavaScript，因为它不会填充按钮，但设法弄清楚我需要在html中的按钮之后将JavaScript放在标签内。我还包括了我用来随机化的JavaScript，每个人都能找到答案。

<script>
    var answers = [window.localStorage.getItem("correct"), window.localStorage.getItem("wrong1"), window.localStorage.getItem("wrong2"), window.localStorage.getItem("wrong3")];
    var index = Math.floor(Math.random() * answers.length);
    var answer1 = answers[index];
    answers.splice(index, 1);
    index = Math.floor(Math.random() * answers.length);
    var answer2 = answers[index];
    answers.splice(index, 1);
    index = Math.floor(Math.random() * answers.length);
    var answer3 = answers[index];
    answers.splice(index, 1);
    index = Math.floor(Math.random() * answers.length);
    var answer4 = answers[index];
    answers.splice(index, 1);
    window.localStorage.setItem("answer1", answer1);
    window.localStorage.setItem("answer2", answer2);
    window.localStorage.setItem("answer3", answer3);
    window.localStorage.setItem("answer4", answer4);

    document.getElementById("answer1").value = window.localStorage.getItem("answer1");
    document.getElementById("answer2").value = window.localStorage.getItem("answer2");
    document.getElementById("answer3").value = window.localStorage.getItem("answer3");
    document.getElementById("answer4").value = window.localStorage.getItem("answer4");
</script>

毕竟正在发生的事情是整个shebang工作的例外情况是，当按钮出现时，他们会在localStorage中找到最后加载的答案版本，并将保留所有问题（即问题更改，但是答案是一样的）。

就像我在开头所说的那样，我猜测这是以错误的顺序加载提交按钮的值，或者在第一次运行后错过了这个JavaScript。任何关于如何解决这个混乱问题的建议都会受到热烈的欢迎。

Answer 1

jQuery mobile增强了按钮，使文本不再是输入的值，而是jQM创建的DIV中的html。所以你只需要在设置值后告诉jQM刷新小部件：

所以而不是

document.getElementById("answer1").value = window.localStorage.getItem("answer1");
document.getElementById("answer2").value = window.localStorage.getItem("answer2");
document.getElementById("answer3").value = window.localStorage.getItem("answer3");
document.getElementById("answer4").value = window.localStorage.getItem("answer4");

使用jQuery并调用.button（“refresh”）

$("#answer1").val(window.localStorage.getItem("answer1")).button("refresh");
$("#answer2").val(window.localStorage.getItem("answer2")).button("refresh");
$("#answer3").val(window.localStorage.getItem("answer3")).button("refresh");
$("#answer4").val(window.localStorage.getItem("answer4")).button("refresh");

<强> DEMO

输入提交按钮由于排序而缺少值

1 个答案: