Question

点击cookies-banner-bloc时，我试图隐藏Close this message div。我哪里错了？

HTML：

<div class="cookies-banner-bloc">
    <div class="cookies-banner-container">
        <p>We use cookies on this website.</p>
        <a class="cookies-close-button no-border">Close this Message</a>
    </div>
</div>

CSS：

.hide {
  opacity:0;
}

JS：

$( document ).ready(function() {

    if(getCookie("userclosedalert")=="true"){
          $(".cookies-banner-bloc").addClass('hide');
            removeClass = false;
    }
    $(".cookies-close-button").click(function () {
       document.cookie = "userclosedalert=true";

    });

});

演示： https://jsfiddle.net/28860gqj/

Answer 1

您还必须在点击事件后添加该类：

$( document ).ready(function() {

   if(getCookie("userclosedalert")=="true"){
      $(".cookies-banner-bloc").addClass('hide');
        removeClass = false;
   }
   $(".cookies-close-button").click(function () {
       document.cookie = "userclosedalert=true";
       $(".cookies-banner-bloc").addClass('hide');
   });

 });

所以它会在重新加载之后和点击事件之后起作用。

Answer 2

我使用jQuery cookie来管理cookie 我发现它很容易使用。

有关如何使用的文档是here ...如果不再维护此GitHub页面的事件，它对文档很有用。最新的CDN是here。

$( document ).ready(function() {

  // A console check on the cookie value.
  console.log( $.cookie("userclosedalert") );

  // if the cookie exist
  if($.cookie("userclosedalert")=="true"){
    $(".cookies-banner-bloc").addClass('hide');
    console.log("cookie found");
  }

  // Set the cookie on click
  $(".cookies-close-button").click(function () {
    $.cookie("userclosedalert","true", {expires: 7, path: "/"}); // Expires isn't mandatory and is in days.
    console.log("cookie setted");
    $(".cookies-banner-bloc").addClass('hide');
  });

});

CodePen

Answer 3

点击按钮时没有检查。只需在点击内移动您的条件。

但是，为什么要设置和删除cookie？我在这里看不到任何用法。

$( document ).ready(function() {

    $(".cookies-close-button").click(function () {
       document.cookie = "userclosedalert=true";  
     if(getCookie("userclosedalert")=="true"){
          $(".cookies-banner-bloc").addClass('hide');
            removeClass = false;
    }

    });

});

https://jsfiddle.net/28860gqj/1/

Answer 4

getCookie未定义，因此您收到此错误 Uncaught ReferenceError: getCookie is not defined。也许你会使用document.cookie。你可以在这里找到如何阅读cookies：

Reading cookies by name

到目前为止，其余部分看起来都很好，所以在修复之后，一切都应该按预期工作。

单击超链接时将div设置为不透明度0

4 个答案: