javascript - 从其他数据 Angular 色 ="page"重新加载第一个数据 Angular 色 ="page"

Question

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

根据某些条件，单击第一页上的按钮后，我将在第二页上渲染/显示某些字段。

现在我正在获取第二页

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

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

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

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

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

我该怎么做？

如果这是不可能的，那么:

通过单击“浏览器刷新按钮”或按 F5 刷新浏览器时，我需要从 URL 中删除 #secondPageId。

这样我就可以返回第一页。

Answer 1

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

1. 最初隐藏所有元素，并使用 jQuery 在页面更改时显示所需的元素。
2. 最初不隐藏任何内容，并使用 jQuery 在页面更改时隐藏所需的元素。

fiddle 使用后一种。

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");
  });
});