jQuery手机：记住之前页面的变量 [英] jQuery mobile: remember variable of page before

问题描述

一个按钮应该重定向到页面AAA或页面BBB。
此决定应取决于之前页面上按钮的选择。

第1页：#home

• 按钮A：指向#setpage的链接
  
• 按钮B：指向#setpage的链接
  

---

第2页：#setpage

• 输入：用户可以设置一些东西


• 按钮：只有一个按钮（指向页面#AAA或页面#BBB的链接） $ b

---

第3页：#AAA

• 用户应该在这里，如果按钮A点击了Page 1

或 p>

第4页：#BBB

• 在这里，如果按钮B点击了Page 1

---

我认为，我可以做到这一点与我的手机/浏览器的localStorage（我使用jQM + PhoneGap），但是这是最好的解决方案还是有更好的方法？ 解决方案

如果这是一个单页面应用程序，您可以在主页上单击A和B按钮时切换setpage按钮的HREF。

以下是 DEMO

  $（document）.on（pageinit，#Home，function（）{$ b $（'。btnAB'）。on（click，function（e）{
 var id = $（this）.prop（id）; 
 if（id ==='btnB'）{
 $（'＃btnSetpage'）。prop（'href'，'#BBB'）; 
} else {
 $（'＃btnSetpage'）。prop（'href'，'#AAA'）; 
} 
}）; 
}）; 
  

上面的脚本处理2个按钮的点击事件（它们具有相同的类）。它看到哪个按钮被点击，然后在设置页面上设置一个按钮的href。

 < div data-role = pageid =Home> 
< div data-role =header> 
< h1>主页< / h1> 
< / div> 
< div data-role =content> 
< a class =btnABid =btnAhref =＃setpagedata-role =button> A< / a> 
< a class =btnABid =btnBhref =＃setpagedata-role =button> B< / a> 
< / div> 
< / div> 
 
< div data-role =pageid =setpage> 
< div data-role =header> 
< h1> setpage< / h1> 
< / div> 
< div data-role =content> 
< a id =btnSetpagehref =＃AAAdata-role =button>提交< / a> 
< / div> 
< / div> 
 
< div data-role =pageid =AAA> 
< div data-role =header> 
< h1> AAA< / h1> 
< / div> 
< div data-role =content> 
我是AAA 
< a href =＃Homedata-role =button>主页< / a> 
< / div> 
< / div> 
 
< div data-role =pageid =BBB> 
< div data-role =header> 
< h1> BBB< / h1> 
< / div> 
< div data-role =content> 
我是BBB 
< a href =＃Homedata-role =button>主页< / a> 
< / div> 
< / div> 
  

One button should redirect either to page AAA or to page BBB. This decision should depend on the choice of the buttons on the page before.

Page 1: #home

• Button A: links to #setpage
• Button B: links to #setpage

---

Page 2: #setpage

• Input: user can set something
• Button: only one button (links to page #AAA or page #BBB)

---

Page 3: #AAA

• User should be here, if button A clicked on Page 1

or

Page 4: #BBB

• User should be here, if button B clicked on Page 1

---

I think, I can do that with the localStorage of my phone/browser (I'm using jQM+PhoneGap), but is that the best solution or is there a better way?

解决方案

If this is a single page app, you could just switch the HREF of the setpage button when clicking the A and B buttons on the home page.

Here is a DEMO

$(document).on("pageinit", "#Home", function(){
    $('.btnAB').on("click", function(e){
        var id = $(this).prop("id");
        if (id === 'btnB'){
            $('#btnSetpage').prop('href', '#BBB');
        } else {
            $('#btnSetpage').prop('href', '#AAA');
        }
    });
});

The script above handles the click event of the 2 buttons (they have the same class). It sees which button was clicked and then sets the href of the one button on the setpage.

<div data-role="page" id="Home">
    <div data-role="header">
         <h1>Home</h1> 
    </div>
    <div data-role="content">
        <a class="btnAB" id="btnA" href="#setpage" data-role="button">A</a>
        <a class="btnAB" id="btnB" href="#setpage" data-role="button">B</a>
    </div>
</div>

<div data-role="page" id="setpage">
    <div data-role="header">
         <h1>setpage</h1> 
    </div>
    <div data-role="content">
        <a id="btnSetpage" href="#AAA" data-role="button">Submit</a>
    </div>
</div>

<div data-role="page" id="AAA">
    <div data-role="header">
         <h1>AAA</h1> 
    </div>
    <div data-role="content">
        I am AAA
        <a href="#Home" data-role="button">Home</a>
    </div>
</div>

<div data-role="page" id="BBB">
    <div data-role="header">
         <h1>BBB</h1> 
    </div>
    <div data-role="content">
        I am BBB
        <a href="#Home" data-role="button">Home</a>
     </div>
</div>

这篇关于jQuery手机：记住之前页面的变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！