Question

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

我有20页显示网站上的价格。然后，切换按钮应隐藏/显示页面上的价格。每次打开新页面时我都不想切换，所以如果我设置切换按钮隐藏价格应该隐藏在所有页面上，直到我再次点击按钮。

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

Answer 1

实现这一目标的方法没有尽头，但Viridis提出的方法听起来很可能是最好的方法。

从ASP会话变量（默认为可见）初始化价格的可见性
使用jQuery onClick of a按钮显示/隐藏价格
通过一个简单的ASP页面更新ASP Session变量，通过AJAX onClick同样的buttom来调用

这将是您的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页面中的代码，通过showHidePricesOnClick方法中的AJAX调用，如下所示：

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

正如我所说，这是未经测试的（我可以肯定地做得更优雅），但希望能帮助你大致了解你需要做些什么来实现你所追求的目标。 / p>

Answer 2

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

您必须编辑所有20个页面才能突然支持'dont_show_price'参数...但它会为您提供所需的结果。

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

2 个答案: