Question

这就是我想要的：

新用户访问我的网站。可以看到固定在视口底部的通知栏。
然后用户点击菜单项，转到另一个页面。在第二页加载时设置一个cookie，它会将通知栏隐藏60天（必须100％隐藏，而不是在页面加载时闪存到异步加载的javascript）。
用户还可以点击＆＃34;确定＆＃34;按钮关闭通知栏并设置相同的cookie。

这是我的HTML：

<div id="cookie-message">
    <span>Cookie notice here <a href="#">Read more</a> <a href="#" id="cookie-message-close">Ok</a></span>
</div>

如何使用jQuery执行此操作？

谢谢！

Answer 1

您可以使用API来处理Cookie，使事情变得更加轻松。

首先，您将display: none;放入div cookie-message。

关于隐藏或不通知的逻辑，你可以在第一次加载窗口时放置一个监听器：

window.addEventListener('load', function(){...});

通过这种方式，您可以获得加载窗口的时刻。如果此时没有通知读取的cookie，则显示div（$('#cookie-message').show()，然后设置cookie。如果已经设置了cookie，则不执行任何操作。

关于确定点击，在链接中设置点击监听器以隐藏通知div（$('#cookie-message').show()）。

为了帮助你，我做了一个simple example我所说的例子。

Answer 2

非常感谢你的回应，Henrique。但是，我无法将它与二人组合工作.jQuery $ .cookie不是一个功能＆＃34;错误。

我发现了＆＃34; jQuery Cookie＆＃34;已弃用，js-cookie是新版本。通过包含它并将旧的cookie功能更改为新的功能，它现在可以完美运行！

这是我的最终jQuery代码，使用＆＃34; js-cookie＆＃34;：

* {
  box-sizing: border-box;
}
html, body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}
.wrapperSlider {
  position: relative;
  width: 100%;
  padding-bottom: 35%;
}
#slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#slider > * {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
  background: red;
  opacity: 0;
  transition: all ease-in-out .5s;
}
#slider > * > * {
  display: table-cell;
  vertical-align: middle;
}
#slider > *.activeSlider {
  z-index: 1;
  background: green;
  opacity: 1;
}
.wrapperPaging {
  text-align: center;
}
#pagingSlider {
  display: inline-block;
  font-size: 0;
}
#pagingSlider > * {
  display: inline-block;
  margin: 0 10px;
  font-size: 14px;
  color: black;
  cursor: pointer;
  transition: all ease-in-out .5s;
}
#pagingSlider > *.activePaging {
  color: red;
  cursor: default;
}

请注意，由于Wordpress＆＃39;我已将$更改为jQuery。 noConflict（）模式，因为我在Wordpress中开发。

如何设置cookie以隐藏第二页加载时的通知栏？

2 个答案: