Jquery 在页面之间隐藏（切换可见性）元素
我正在努力实现一些我不确定是否可行的事情。我想要一个切换按钮来隐藏/显示页面上的元素。使用jQuery很容易做到这一点。问题是我希望在打开的下一页中记住设置 我有20页在一个网站上显示价格。切换按钮应隐藏/显示页面上的价格。我不想每次打开新页面时都切换，所以如果我将切换按钮设置为隐藏，那么所有页面上的价格都应该隐藏，直到我再次按下按钮Jquery 在页面之间隐藏（切换可见性）元素,jquery,html,css,asp-classic,Jquery,Html,Css,Asp Classic,我正在努力实现一些我不确定是否可行的事情。我想要一个切换按钮来隐藏/显示页面上的元素。使用jQuery很容易做到这一点。问题是我希望在打开的下一页中记住设置 我有20页在一个网站上显示价格。切换按钮应隐藏/显示页面上的价格。我不想每次打开新页面时都切换，所以如果我将切换按钮设置为隐藏，那么所有页面上的价格都应该隐藏，直到我再次按下按钮 有人知道如何轻松完成这项工作吗？这是一个ASP页面，因此设置会话变量是一种解决方案，但使用jQuery会更酷，因为元素会立即隐藏。您想使用jQuery进行第一次切
有人知道如何轻松完成这项工作吗？这是一个ASP页面，因此设置会话变量是一种解决方案，但使用jQuery会更酷，因为元素会立即隐藏。您想使用jQuery进行第一次切换，如何描述它。 然后，您希望jQuery/js连接到后端（我假设您是ASP），并在会话中为当前用户设置一些值。通过这种方式，jQuery/javascript可以顺利地完成初始隐藏，之后如果您加载了新页面，您的后端将不会向您发送价格，从而导致这些价格根本不会显示出来。（这样，您甚至不必再考虑使用jQuery删除它们）
您将不得不编辑所有20页以突然支持“不显示价格”参数。。。但是它会让你得到你想要的结果。实现这一点的方法无穷无尽，但Viridis建议的方法听起来很可能是最好的方法
- 从ASP会话变量初始化价格的可见性（默认为可见）
- 单击按钮后使用jQuery显示/隐藏价格
- 通过一个简单的ASP页面更新ASP会话变量，该页面通过同一按钮的AJAX onClick调用
<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>
正如我所说，这是未经测试的（我相信可以做得更优雅），但希望能帮助您大致了解需要做什么才能实现您的目标。感谢Ted发布完整的页面！非常感谢！我理解页面应该如何工作，但Ajax调用似乎不起作用。当我在浏览器中运行showHidePrices.asp时，会切换会话变量，但单击主页（上面的页面）上的按钮时不会切换，不会发生任何情况。你知道哪里不对吗？我编辑了下面一行，没有其他内容：url:“showHidePrices.asp”。我在AJAX调用中添加了一些额外的错误处理，希望能为您提供一些关于失败原因的额外信息（例如，找不到页面…）。关于jQuery AJAX调用的完整细节如下：我现在已经第一次测试了它（有点晚了，抱歉！），在添加了一些有用的东西之后，比如对jQuery的引用、showHidePrices后的一些括号单击按钮上的调用，最后在AJAX调用中设置正确的showHidePrices.asp路径，一切都很顺利。希望你现在也开始工作了？是的，现在工作很好！非常感谢！另外，对于我在第一篇文章中糟糕的拼写，我很抱歉，我一定是在赶时间。不会再发生了：）太好了！很高兴听到这个消息。
<%
if Session("hidePrices") = "Y" then
Session("hidePrices") = "N"
else
Session("hidePrices") = "Y"
end if
%>