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>

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

1.当我点击venta或aliquler或buscar时，根据它改变标题。但问题是当我刷新页面时（在jsfiddle结果框中）标题没有显示。我怎样才能使它成为现实。

2.如果标题为＆＃34; venta＆＃34;，如何显示第一个输入类型。否则它应显示第二个输入类型。

Answer 1

首先，您的问题标题会产生误导，您的问题与此无关。现在让我回答你的问题。

这几乎是不可能的，在整页刷新页面从DOM中删除并再次添加时，没有什么能够幸免于此类动作。如果没有什么可以存活的话，新刷新的应用程序无法知道最后打开的页面是什么。

你有一个解决方案。每次更改页面时，都可以将当前标题存储到localstorage中。如果您更多回到主页，则删除此数据。这样，如果刷新页面，应用程序仍然可以访问localstorage以获取上次访问的页面。

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

这是一个简单的实现

工作示例：http://jsfiddle.net/Gajotres/YLhvc/

$(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;            
    }
});

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

这是一个结合前两个的解决方案。

工作示例：http://jsfiddle.net/Gajotres/rQz6g/

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" 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>

的JavaScript：

$('.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;            
    }
});

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

HTML

1 个答案:

HTML：

的JavaScript：