jQuery 删除 div 并将 cookie 设置为不再显示

Question

点击链接后，我正在使用以下 html / jQuery 删除 div。

单击链接时，我还需要设置一个 cookie，当同一访问者返回网站时，该 div 会保持“已删除”状态。

HTML

<div id="close-me">
    bye bye - being removed on click of close link
</div>

<p>
  <a href="#" class="close-div">Close</a>
</p>

jQuery

jQuery(document).ready(function( $ ) {
  jQuery(".close-div").click(function(){
    jQuery("#close-me").remove();
  });
});

我认为 jquery.cookie.js 是最好的解决方案。

我该怎么做？

JSfiddle here

Answer 1

你可以做这样的事情（没有插件）：

var setCookie = function(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  var expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}

var getCookie = function(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1);
    if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
  }
  return "";
}

jQuery(document).ready(function($) {
  console.log(getCookie("closed"));
  if (getCookie("closed") == "closed") {
    $("#close-me").hide();
  }

  jQuery(".close-div").click(function() {
    jQuery("#close-me").remove();
    setCookie("closed", "closed", 365)
  });
});

您的小提琴已更新：https://jsfiddle.net/nn42z27t/

这个例子来自：http://www.w3schools.com/js/js_cookies.asp

Answer 2

jQuery Cookie 不再维护，所以我不会这么做。相反，您可以使用js-cookie，这是 jQuery Cookie 开发团队推荐的替代品。

一旦加载，它将是：

jQuery(document).ready(function($) {
    if (typeof Cookies.get('hide-div') !== 'undefinied') {
        $("#close-me").remove();
    }

    $(".close-button").click(function() {
        $("#close-me").remove();
        Cookies.set('hide-div', true);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.2/js.cookie.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="close-me">
  <i class="close-button">&times;</i>
  Your content here
</div>

Answer 3

您确实可以在这里使用 jQuery cookie 库。加载一次检查cookie是否设置并删除div，单击删除链接设置cookie一次，如下所示：

jQuery(document).ready(function($) {
    if ($.cookie('hide-div')) {
        $("#close-me").remove();
    }

    $(".close-div").click(function() {
        $("#close-me").remove();
        $.cookie('hide-div', true);
    });
});

Updated fiddle

不要忘记在您的页面中包含 jQuery cookie 库。我使用了来自this CDN 的副本。