Question

假设我跟随html和jquery mobile链接：

<section id="firstpage" data-role="page">

<label for="a">Enter a</label>
<input id="a" type="number"/>

<label for="b">Enter b</label>
<input id="b" type="number"/>

<label for="c">Enter c</label>
<input id="c" type="number"/>

<a href="#secondpage" data-role="button" data-transition="flip">Show Them!</a>
    </section>

    <section id="secondpage" data-role="page">
<!--I want to show the three values of a,b,c here -->
    </section>

正如你所看到的那样，第一页会有一个按钮，当我按下它时，它会指引我进入第二页。现在，假设我将输入字段值保存到脚本中的三个变量中。如何在第二页显示它们，我对此感到困惑？

如果您只是编写一个简单的jquery脚本，它将在第一页中获取这三个值，并在内部html的第二页中指示时显示它们，这对我有用。

Answer 1

在<head>调用中加载jQuery和jQuery mobile后，将以下代码放在$(document).ready(function(){ ... });标记中：

$("#secondpage").on("pagebeforeshow", function(e, data) {
    data.prevPage.find('input').each(function(index) {
        $('#secondpage').append('<div>' + $(this).val() + '</div>');
    });
});

注意，由于您的输入字段类型设置为number，因此只会输出数字，其他任何内容都将为空白输出。

jsFiddle

Answer 2

只需给按钮元素一个id：

 <a href="#secondpage" id="mybutton" data-role="button" data-transition="flip">Show Them!</a>

然后使用jquery完成剩下的工作，

 $('#mybutton').tap(function(){

 var a = $('#a').val();

 var b = $('#b').val();

 var c = $('#c').val();

 var total= 'a is '+ a + ',b is' + b + ',c is' + c;
 $('#secondpage').html(total);
 });

应该做的工作

Jquery mobile，使用多个页面

2 个答案: