2

这是我的 html 第一个页面，我们将在其中填写详细信息

<div data-role="content">
   <div data-role="fieldcontain">
       <label for="name1">Name</label>
          <input name="name1" id="name1" value="" type="text">
   </div>
   <div data-role="fieldcontain">
        <label for="age">Age</label>
        <input name="age" id="age" value="" type="text">
   </div>
   <div data-role="fieldcontain">
        <label for="address">Address</label>
         <input name="address" id="address" value="" type="text">
   </div>
   <div data-role="fieldcontain">
         <label for="mobile">Mobile</label>
         <input name="mobilet" id="mobile" value="" type="text">
   </div>
   <div data-role="button" data-theme="b" data-inline="true" id="button">Submit</div>
</div>

下面是第二页，我们将在其中显示填充的数据，将给出一个编辑按钮，将用户再次带到第一页。

<div data-role="content" id="content2">
    <form id="form1">
        <div data-role="fieldcontain">
            <label for="name">Name</label>
            <span class="field" style="padding:350px;" id="un"></span>
        </div>
        <div data-role="fieldcontain">
            <label for="age">age</label>
            <span class="field1" style="padding:350px;" id="pw"></span>
        </div>
        <div data-role="fieldcontain">
            <label for="address">Address</label>
            <span class="field2" style="padding:350px;" id="au"></span>
        </div>
        <div data-role="fieldcontain">
            <label for="mobile">Mobile</label>
            <span class="field3" style="padding:350px;" id="fr"></span>
        </div> 
        <div style="text-align:center;">                    
            <div data-role="button" data-theme="b" data-inline="true" id="button2">Edit</div>
        </div> 
    </form>
</div>

在jQuery中： -

$(document).unbind('pageinit').bind('pageinit', function () {          
    $("#button1").click(function () {
        callConnection();
    });     
    $("#button2").click(function () {
        callEditConnection();
    });
});

function callConnection(){
    localStorage.setItem("user", $("#name1").val());
    localStorage.setItem("pass", $("#age").val());
    $.mobile.changePage("#page2");
}

function callEditConnection(){
    $("#un").val(localStorage.getItem("user"));
    $("#pw").val(localStorage.getItem("pass"));
    $.mobile.changePage("#page1");       
}

请帮助我找出我的代码存在什么问题，即 page2 的值没有出现

4

1 回答 1

3

从您的代码中我看不到您正在将数据传递到第 2 页，我假设您想显示您在第 1 页输入的数据，在您的文档绑定方法中放置此代码

$("#page2").on("pageshow", function (event) {
    $("#un").text(localStorage.getItem("user"));
    $("#pw").text(localStorage.getItem("pass"));
});

该功能将在页面显示时触发。所以这里我们从本地存储中获取值并将其放入 html 中。

这是工作小提琴

于 2013-07-15T11:14:41.187 回答