隐藏（切换可见性）页面之间的元素

我试图实现我不确定的事情是可行的。我想要一个切换按钮来隐藏/显示页面上的元素。这很容易用jQuery完成。问题是我希望在我打开的下一页上记住这个设置。隐藏（切换可见性）页面之间的元素

我有20页显示网站价格。切换按钮应该隐藏/显示页面上的价格。我不想在每次打开新页面时进行切换，因此如果我将切换按钮设置为隐藏，则应该在所有页面上隐藏价格，直到我再次点击该按钮。

任何人都知道如何轻松完成此任务？这是一个ASP页面，所以设置一个Session变量是一个解决方案，但是使用jQuery的方式更酷，因为元素被立即隐藏。

2013-12-17 John

有没有办法实现这一目标，但方法Viridis建议听起来很可能是最好的方法。

初始化价格的知名度从ASP会话变量（默认为可见）
显示/使用按钮
更新通过一个简单的ASP页面的ASP会话变量的jQuery的onClick隐藏的价格，通过相同BUTTOM的AJAX的onClick叫

这将是一个简化（和未经考验的！）版本的ASP页：

<html> 
<head>  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" lang="javascript" type="text/javascript"></script> 
    <script lang="javascript" type="text/javascript"> 

     //page variable storing the show/hide flag, initialised from the session variable 
     <% if Session("hidePrices") = "Y" then %> 
      var hidePrices = true; 
     <% else %> 
      var hidePrices = false; 
     <%end if%> 

     //worker to actually show/hide the prices 
     function showHidePrices(pHidePrices) 
     { 
      if(pHidePrices) 
       $(".myPrices").hide(); 
      else 
       $(".myPrices").show(); 
     } 

     //show/hide prices button click handler 
     function showHidePricesOnClick() 
     { 
      //toggle the flag 
      hidePrices = !hidePrices; 

      //show/hide the prices 
      showHidePrices(hidePrices); 

      //toggle the flag stored in the session variable 
      $.ajax({ 
       url: "http://www.yoursite.com/showHidePrices.asp", 
       cache: false, 
       success:function(result,status,xhr){ 
        alert("Called showHidePrices.asp OK!"); 
       }, 
       error:function(xhr,status,error){ 
        alert(xhr.responseText); 
        alert(status); 
        alert(error); 
       }     
      }); 
     } 

     //hide the prices onload if necessary 
     $(document).ready(function() { 

      if(hidePrices) 
      { 
       showHidePrices(true); 
      } 
     }); 

    </script> 

</head> 
<body> 

    <p class="myPrices">price 1</p> 
    <p class="myPrices">price 2</p> 
    <p class="myPrices">price 3</p> 

    <input type="button" onclick="showHidePricesOnClick();" value="Show/Hide Prices"/> 

</body> 
</html>

在showHidePrices.asp页面，通过AJAX在showHidePricesOnClick方法调用的代码，会是这样的：

<% 
    if Session("hidePrices") = "Y" then 
     Session("hidePrices") = "N" 
    else 
     Session("hidePrices") = "Y" 
    end if 
%>

正如我所说的，这是未经测试（并且可以更优雅的完成我当然可以），但希望能帮助你粗略地了解你需要做些什么来实现你的目标。

来源

2013-12-17 16:01:43 Ted

谢谢泰德发布一个完整的页面！非常感谢！我了解该页面应该如何工作，但看起来Ajax调用不起作用。当我在浏览器中运行showHidePrices.asp时，会话变量被切换，但当点击主页面上的按钮（上面的页面）时，不会发生。任何想法可能是错误的？我编辑了下面一行，没有别的：url：“showHidePrices.asp”。 – John

我在AJAX调用中添加了一些额外的错误处理，希望能为您提供一些关于失败原因的额外信息（例如找不到页面......）。关于jQuery AJAX调用的完整细节在这里：http：//api.jquery.com/jQuery.ajax/ – Ted

我实际上第一次测试它（有点迟了，对不起！），并添加了一些有用的像jQuery的引用，在showHidePricesOnClick调用按钮之后的一些括号，最后，在AJAX调用中设置showHidePrices.asp的正确路径，一切都很好。希望你现在也能做到吗？ – Ted

你想用jQuery做第一次切换，你是如何描述它的。然后，您需要将jQuery/js连接到您的后端（假设您的情况为ASP），并为SESSION中的当前用户设置一些值。这样，通过jQuery/javascript可以顺利完成初始隐藏，之后如果您曾经加载过新页面，则后端将不会发送您的价格，导致这些价格根本不显示。（这种方式你甚至不必考虑使用jQuery来删除它们）

你将不得不编辑你所有的20页来突然支持'dont_show_price'参数......但它会让你得到你的结果想。

来源

2013-12-17 13:47:12 Viridis

隐藏（切换可见性）页面之间的元素

回答

相关问题