JS Cookie隐藏/显示div [英] JS Cookie hide/show div

问题描述

尝试使用 JS Cookie 制作jQuery Cookie隐藏/显示框，但我可以通过某种方式使其无法正常工作.该框根本不会显示.我正在使用Shopify.

Trying to make a jQuery cookie hide/show box using JS Cookie, but I somehow can't make it work. The box won't display at all. I'm using Shopify.

#pop-up {
    display: none;
}

jQuery:

<script type='text/javascript'>//<![CDATA[
  $(window).load(function(){
  // if no cookie
  if (!$.cookie('alert')) {
      $( "#pop-up" ).show();
      $("#hide").click(function() {
          $( "#pop-up" ).slideUp( "slow" );
          // set the cookie for 24 hours
          var date = new Date();
          date.setTime(date.getTime() + 24 * 60 * 60 * 1000); 
          $.cookie('alert', true, { expires: date });
      });
  }
  });//]]> 
</script>

其余:

<div id="pop-up">
  <div id="center" class="box">
    40% off today only<br>
    <a id="hide" href="#">OK, thanks!</a>
  </div>
</div>

推荐答案

它不起作用，因为您只能在Cookie中存储字符串.您存储字符串"true"而不是布尔值true.

It does not work because you can only store strings in cookies. You store the string "true" instead of the boolean value true.

尝试以下代码，将我的支票替换为!= "true".

Try the following code where I replaced the check with != "true".

<script type='text/javascript'>//<![CDATA[
  $(window).load(function(){
  // if no cookie
  if ($.cookie('alert')!="true") {
      $( "#pop-up" ).show();
      $("#hide").click(function() {
          $( "#pop-up" ).slideUp( "slow" );
          // set the cookie for 24 hours
          var date = new Date();
          date.setTime(date.getTime() + 24 * 60 * 60 * 1000); 
          $.cookie('alert', "true", { expires: date });
      });
  }
  });//]]> 
</script>

有效的jsfiddle: http://jsfiddle.net/bqam0qb4/1/

A working jsfiddle: http://jsfiddle.net/bqam0qb4/1/

这篇关于JS Cookie隐藏/显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！