JS - 如果 cookie 存在则隐藏 div答案

【问题标题】：JS - Hide div if cookie existsJS - 如果 cookie 存在则隐藏 div
【发布时间】：2016-03-14 02:28:00
【问题描述】：

在这里，基本上，我想让客户在 30 天内只显示一次 div。如果不存在 cookie，则会显示 div，当单击时，div 会做一些与此处无关的事情，然后它会存储一些 cookie（例如客户端 IP）。如果 cookie 存在，尽管 div 会消失。我这里写了一些代码，可以的话看看，帮我解决问题。

<script type="text/javascript" src="http://l2.io/ip.js?var=myip"></script>
<script>
        var el = document.getElementsByClassName('popup');

if(!document.cookie) {
    el.style.display = 'block';
    setCookie("clientip", myip, 30);
} else {
    el.style.display = 'none';
}

function setCookie(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;
}
</script>

如何在此处为“弹出”设置侦听器？

顺便说一句，我发现第一个脚本非常酷，可以通过 JS 返回客户端 IP。

【问题讨论】：

这是一个div，在这里无关紧要。 @MitchKarajohn
@BillHicks，不是真的！ getElementsByClassName 返回一个节点列表...array-like 没有style 属性的元素...
不，我以为你问我那个 div 是做什么的。是的，我知道这是一个节点列表。嗯，那我该如何设计呢？
如果元素很多，那么loop 或者只使用像[0]这样的索引
@MitchKarajohn 我找到了解决方案，检查我的答案，谢谢。 :)

标签： javascript html dom cookies

【解决方案1】：

用 jQuery 来做 ;)

使用$.cookie("cookietitle", "cookievalue"); 设置您的cookie，并查看它是否已设置并隐藏元素，请执行以下操作：

$(document).ready(function() {
     var CookieGet = $.cookie('yourcookie');
     if (CookieGet != null) {
          // Hide the element here.
          $('.yourelement').hide();
     }
 });

【讨论】：

他真的不需要用 jQuery 做这么简单的事情，不是吗？
不，但这取决于他的项目。如果他已经在使用 jQuery，为什么不使用它呢？ :)
@AleksandarSpasojević 我找到了解决方案，检查我的答案，谢谢。 :)

【解决方案2】：

您实际上并不需要一个监听器。只需将popup 元素默认显示为none，然后将问题中的代码放在<body> 的末尾。

或者让它加载到DOMContentLoaded。

另外，是的，如评论中所述，您必须将getElementsByClassName 更改为其他内容，因为现在el 不是一个元素，而是一组元素。见documentation

如果您知道只有一个 popup 元素，您可以使用 document.querySelector('.popup');

【讨论】：

【解决方案3】：

好的，经过一番头脑风暴，我意识到我需要将我的 div 从 class 更改为 id，因为这样会更容易处理，剩下的就是：

<script type="text/javascript" src="http://l2.io/ip.js?var=myip"></script>
<script>
    var el = document.getElementById('popup');
    el.addEventListener('click', showhide);

    if(!document.cookie) {
        console.log("No cookie");
        setCookie("clientip", myip, 30);
        function showhide() {
            el.style.display = 'none';
            console.log("Cookie is stored");
        }
    } else {
        el.style.display = 'none';
        console.log("We have your cookies");
    }

    function setCookie(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;
    }
</script>

【讨论】：