Question

想要点击按钮生成cookie，然后检查cookie是否存在，如果cookie存在则隐藏div。

这是我使用我的代码的地方，但我似乎无法使if语句按预期运行..

    (function ($) {
      
      $(".cookieSetter").click(function () {
         $.cookie('cookieMade', 'jobDone');
      });
      
      if ($.cookie('cookieMade', 'jobDone') == "true") {
        $('.box').hide();
      }
        
    })(jQuery);

    button {
      height: 48px;
      width: 112px;
      background: #fff;
      border: 2px solid #2d2d2d;
      color: #2d2d2d;
      font-size: 14px;
      font-weight: 600;
      text-transform: uppercase;
      cursor: pointer;
    }
    
    .blue {
      background: blue;
    }
    
    .box {
      width: 100px;
      height: 100px;
      margin-top: 10px;
    }

    <a class="cookieSetter" href="#"><button>Set cookie</button></a>
    <div class="blue box"></div>

Answer 1

检查Cookie的语法不正确。你需要使用＆＃39; getter＆＃39;为了价值。另请注意，您可以根据需要使用toggle()来显示/隐藏元素。试试这个：

(function($) {
    $(".cookieSetter").click(function () {
        $.cookie('cookieMade', 'jobDone');
    });

    $('.box').toggle($.cookie('cookieMade') != 'jobDone');
})(jQuery);

Answer 2

您对$.cookie('cookieMade', 'jobDone')的使用是Cookie的设置者，而不是getter。如果您想获取cookie的值，您应该使用$.cookie('cookieMade')，并检查返回的值：

if ($.cookie('cookieMade') == 'jobDone') {
    // Do something if the cookie's value is 'jobDone'
}

在你的情况下：

if ($.cookie('cookieMade') == 'jobDone') {
    // Do something if the cookie's value is 'jobDone'
    $('.box').hide();
}

更新

codepen的问题在于，每次重新加载页面时都会得到不同的path，默认情况下，$.cookie会将Cookie的路径设置为当前路径。
您可以将path设置为/，以便Cookie对您网域中的所有网页都有效：

$.cookie('cookieMade', 'jobDone', {path: '/'});

这将在codepen中运行（也应该在您的网站中使用）。

Answer 3

When you set the cookie you can raise event and subscribe that event wherever is
needed.
(function ($) {  
  $(".cookieSetter").click(function () {
     $.cookie('cookieMade', 'jobDone');
    $(document).triggerHandler('_cookieSetter', true);
  });  
  $(document).off('_cookieSetter.add').on('_cookieSetter.add', function () {
               if ($.cookie('cookieMade') == 'jobDone') {
    $('.box').hide();
}});
})(jQuery);

如果cookie存在，如何隐藏div

3 个答案:

更新