Question

我的表单包含三个不同的data-role="page"，其中包含三个不同的data-url="abc".

根据某些条件，我在点击第一页上的按钮后在第二页上呈现/显示某些字段。

现在我得到了第二页

<a id="123" class="xxx" href="#secondPageId" data-role="button">GoToNextScreen</a>

现在，在第二页网址中，我可以看到http://www.test.com/index.html#secondPageId

当我在第二页时如果我刷新浏览器，

它显示第二页中的所有可用控件。

但我需要根据按钮点击仅显示少数字段。

我该怎么做？

如果那是不可能的话，那么：

通过单击＆＃34;浏览器刷新按钮＆＃34;刷新浏览器。或者按F5我需要从URL中删除#secondPageId。

这样我才能回到第一页。

Answer 1

我制作了一个jsfiddle来说明可能的解决方案。基本上，您可以通过两种方式执行此操作：

最初隐藏所有元素并使用jQuery在pagechange上显示所需的元素。
最初隐藏任何内容，并使用jQuery在pagechange中隐藏所需的元素。

小提琴使用后者。

<强> HTML ：

<div data-role="page" id="first">
  <div data-role="header">
    <h3>
      First Page
      <a id='Goto_page2' class='ui-btn-right ui-btn ui-corner-all ui-shadow'>NEXT</a>
    </h3>
  </div>
  <div data-role="content">
    <p>
      Please go to next page.
    </p>
  </div>
</div>

<div data-role="page" id="second">
  <div data-role="header">
    <h3>
      Second Page
      <a href='#first' class='ui-btn-left ui-btn ui-corner-all ui-shadow'>HOME</a>
    </h3>
  </div>
  <div data-role="content">
    <div>
      <p class="tobehidden">
        This text was visible, but has been made hidden.
      </p>
    </div>
    <div> 
      <p>
        This text only is visible.
      </p>
    </div>
    <div class="tobehidden"> 
      <h4>
        This text was also visible, but has now been made hidden.
      </h4>
    </div>
  </div>

</div>

<强> jQuery的：

$(document).ready(function(e) {

  //Change to first page at load
  $( ":mobile-pagecontainer" ).pagecontainer( "change", "#first");

  /* 
   * Read more about page handling here: 
   * http://api.jquerymobile.com/pagecontainer/#method-change
   */

  //Click event for the "NEXT" button
  $( document ).on("click", "#Goto_page2", function(){

    //Hide elements that has the class "tobehidden"
    $(".tobehidden").hide();

    //Switch to page 2
    $( ":mobile-pagecontainer" ).pagecontainer( "change", "#second");
  });
});

重新加载第一个data-role =＆＃34; page＆＃34;来自其他data-role =＆＃34; page＆＃34;

1 个答案: