Jquery 如何从其他页面获取价值？

我必须从一个页面到另一个页面获取值，这取决于一些div的显示

这是指向JSFIDLE的链接：

HTML

点击


页脚

在这方面，我面临两个问题

1.当我点击venta、aliquler或buscar时，它的标题会随之改变。但问题是当我刷新页面（在JSFIDLE结果框中）时，标题不会显示。 我怎样才能使它看起来像这样

---

2.如果标题为“venta”，如何显示第一个输入类型。否则，它应该显示第二个输入类型

首先，你的问题标题有误导性，你的问题与此无关。现在让我回答你们的问题

这几乎是不可能的，在整个页面刷新过程中，页面从DOM中删除并再次添加，这样的操作不会使任何内容存活下来。若并没有任何东西能够存活下来，那个么新刷新的应用程序就并没有办法知道最后打开的页面是什么

有一个解决办法。每次更改页面时，都可以将当前标题存储到localstorage中。如果您想返回主页，请删除此数据。这样，若页面被刷新，应用程序仍然可以访问本地存储以获取最后访问的页面

有关localstoare的更多信息以及如何使用它。与其他页到页数据传输解决方案不同，即使设备关闭，本地存储也将保持不变。基本上，它就像cookie一样保存，但与cookie不同，它可以保存大量数据

这是一个简单的实现

工作示例：

如您所见，每次更改页面时，JavaScript都会检查当前页面标题。根据具体情况，它将显示/隐藏输入元素

这里有一个结合了前两种方法的解决方案

工作示例：

HTML:

---

您使用的服务器端语言是什么？

<div data-role="page" id="page1">
<div data-role="header">
        <h1>Click</h1>

</div>
<!-- /header -->
   <div role="main" class="ui-content">
    <p> <a data-role="button" href="#foo" class="clicko" id="1">Venta</a>
   <a data-role="button" href="#foo" class="clicko" id="2">Aliquilar</a>
  <a data-role="button" href="#foo" class="clicko" id="3">Busca</a>

    </p>
   </div>
  </div>
  <!-- Start of first page -->
     <div data-role="page" id="foo">
      <div data-role="header"> <a class="ui-btn ui-icon-carat-l ui-btn-icon-notext ui-corner-all" data-direction="reverse" href="#page1">Back to page "one"</a>

        <h1 id="pagem"></h1>

           </div>
          <!-- /header -->
       <div>
    <input type="text" name="one"/>
    <input type="text" name="two"/>

           </div>
       <!-- /content -->
         <div data-role="footer">
        <h4>Page Footer</h4>

         </div>
           <!-- /footer -->
           </div>

$(document).on('pagebeforeshow', '#foo', function(){ 
    var headerName = $(this).find('.ui-header h1').text();
    switch (headerName) {
        case "Venta":
            $('#one').show();
            $('#two').hide();
            break;
        case "Alquiler":
            $('#one').hide();
            $('#two').show();
            break;
        case "Busca":
            $('#one').hide();
            $('#two').show();
            break;            
    }
});

<div data-role="page" id="page1">
    <div data-role="header">
        <h1>Click</h1>

    </div>
    <!-- /header -->
    <div role="main" class="ui-content">
        <p> <a data-role="button" href="#foo" class="clicko" id="1" data-header="Venta">Venta</a>
            <a data-role="button" href="#foo" class="clicko" id="2" data-header="Aliquilar">Aliquilar</a>
            <a data-role="button" href="#foo" class="clicko" id="3" data-header="Busca">Busca</a>
        </p>
    </div>
</div>
<!-- Start of first page -->
<div data-role="page" id="foo">
    <div data-role="header"> <a class="ui-btn ui-icon-carat-l ui-btn-icon-notext ui-corner-all" data-direction="reverse" href="#page1">Back to page "one"</a>

        <h1 id="pagem"></h1>

    </div>
    <!-- /header -->
    <div>
        <input type="text" name="one" id="one" style="display:none;" value="One"/>
        <input type="text" name="two" id="two" style="display:none;" value="Two"/>

    </div>
    <!-- /content -->
    <div data-role="footer">
        <h4>Page Footer</h4>

    </div>
    <!-- /footer -->
</div>

$('.clicko').on('click', function () {
    var headerTitle = $(this).data('header');
    localStorage.setItem("header", headerTitle);      
});

$(document).on('pagebeforeshow', '#foo', function(){ 
    var headerTitle = localStorage.getItem("header");
    $(this).find('.ui-header h1').html(headerTitle);
    switch (headerTitle) {
        case "Venta":
            $('#one').show();
            $('#two').hide();
            break;
        case "Alquiler":
            $('#one').hide();
            $('#two').show();
            break;
        case "Busca":
            $('#one').hide();
            $('#two').show();
            break;            
    }
});