为什么不在 Javascript 中保存 cookie?
Why is not saved cookies in Javascript?
我有一个向用户显示临时消息的网站。此消息应如下所示:
- 如果用户正在滚动,则消息会消失 -
slideUp()
。
- 如果用户点击关闭按钮,设置 css class
.closed
并存储在 cookie 中从 buzz 关闭,在切换到另一个页面后再次显示此面板.
我需要在用户点击关闭按钮 (.info-close
) 面板时存储一个 cookie,以便在该面板不显示后再次更新。
我在 jsfiddle 上有问题。
$(document).ready(function(){
var $close = $("#info-panel .info-close");
var $info_panel = $("#info-panel");
var $site_main = $(".site-main");
$close.click(function(){
$info_panel.slideUp();
$info_panel.addClass("closed");
// set cookie
document.cookie = "1";
// save cookie to "$yes_closed"
var $yes_closed = document.cookie;
});
$(window).scroll(function() {
// if panel has class closed, after click on "X" > dont open
// or if in cookie "$yes_closed" is save "1" > dont open
if ($info_panel.hasClass("closed")) {
$info_panel.hide();
} else {
if ($(this).scrollTop() > 0) {
$info_panel.slideUp();
} else {
$info_panel.slideDown();
}
}
});
});
#info-panel {
padding: 4px 8px;
background: yellow;
}
.info-close {
padding: 5px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br/><br/><br/>
<div id="info-panel">
<div class="info-text">You are reading documentation for version 9.0.1. Documentation for earlier versions is available as pdfs here.</div>
<div class="info-close">X</div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p>"Hello my friend"</p>
It is because the cookie is not set properly. You need to add a cookie name and assign value to it. On page load do check if the cookie is set. Based on that show the message.
I have your code fixed here in the jsfiddle. Take a look.
http://jsfiddle.net/ssbiswal1987/9bhnyxwn/
我有一个向用户显示临时消息的网站。此消息应如下所示:
- 如果用户正在滚动,则消息会消失 -
slideUp()
。 - 如果用户点击关闭按钮,设置 css class
.closed
并存储在 cookie 中从 buzz 关闭,在切换到另一个页面后再次显示此面板.
我需要在用户点击关闭按钮 (.info-close
) 面板时存储一个 cookie,以便在该面板不显示后再次更新。
我在 jsfiddle 上有问题。
$(document).ready(function(){
var $close = $("#info-panel .info-close");
var $info_panel = $("#info-panel");
var $site_main = $(".site-main");
$close.click(function(){
$info_panel.slideUp();
$info_panel.addClass("closed");
// set cookie
document.cookie = "1";
// save cookie to "$yes_closed"
var $yes_closed = document.cookie;
});
$(window).scroll(function() {
// if panel has class closed, after click on "X" > dont open
// or if in cookie "$yes_closed" is save "1" > dont open
if ($info_panel.hasClass("closed")) {
$info_panel.hide();
} else {
if ($(this).scrollTop() > 0) {
$info_panel.slideUp();
} else {
$info_panel.slideDown();
}
}
});
});
#info-panel {
padding: 4px 8px;
background: yellow;
}
.info-close {
padding: 5px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br/><br/><br/>
<div id="info-panel">
<div class="info-text">You are reading documentation for version 9.0.1. Documentation for earlier versions is available as pdfs here.</div>
<div class="info-close">X</div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p>"Hello my friend"</p>
It is because the cookie is not set properly. You need to add a cookie name and assign value to it. On page load do check if the cookie is set. Based on that show the message.
I have your code fixed here in the jsfiddle. Take a look.
http://jsfiddle.net/ssbiswal1987/9bhnyxwn/