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的副本。

jQuery删除div＆amp;将cookie设置为永不再显示

3 个答案: