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

Question

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

jqueryhtmlcssasp-classic

3

我想要做一件不确定是否可行的事情。我想要一个切换按钮来隐藏/显示页面上的元素。这可以很容易地使用jQuery完成。问题是，我想在下次打开页面时记住设置。

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

有没有人知道如何轻松实现这个功能？因为这是一个ASP页面，所以设置Session变量是一种解决方案，但是使用jQuery会更酷，因为元素可以立即隐藏。

- John

2个回答

1

你希望使用jQuery执行第一个切换，就像你描述的那样。接下来，你希望jQuery/js连接到你的后端（在你的情况下是ASP），并为当前用户在SESSION中设置某些值。这样，jQuery/javascript平稳地完成了初始隐藏，如果以后加载新页面，你的后端将不会发送价格，导致这些价格根本不显示。（这样你甚至不必再考虑使用jQuery删除它们）你需要编辑所有20个页面，以突然支持“dont_show_price”参数……但这将给你想要的结果。

- Viridis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ted · Accepted Answer

有很多种方法可以实现这个目标，但Viridis建议的方法可能是最好的。

从ASP Session变量初始化价格的可见性（默认为可见）
使用jQuery在按钮单击时显示/隐藏价格
通过简单的ASP页面更新ASP Session变量，在同一按钮的onClick中调用AJAX

这将是您的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>

在通过 AJAX 调用的 showHidePricesOnClick 方法中，showHidePrices.asp 页面中的代码应该类似于：

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

如我所说，这是未经测试的（我相信可以做得更加优雅），但希望能够帮助您大致了解需要做些什么才能实现您想要的目标。