如何根据Cookie值使用jQuery隐藏页面元素？

我看了你的代码，问题主要出在初始Cookie判断逻辑错误以及Cookie的处理细节上，导致功能无法正常运行。下面具体说问题和修复方法：

核心问题点 #

• 你的getCookie函数返回的是字符串类型（比如"true"、"false"或者空串""），但你用它和布尔值false比较，这会因为类型强制转换导致逻辑判断错误。比如当Cookie不存在时，getCookie返回""，"" != false的结果是false，会直接执行else分支隐藏元素，这和你“先把cookiesshow设为true”的需求完全相反。
• 设置Cookie时没有指定路径和过期时间，默认的Cookie可能只在当前路径生效，或者页面关闭后就消失，导致刷新页面后状态丢失。

修复后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    // 封装Cookie读取方法
    function getCookie(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 "";
    }

    // 新增Cookie设置方法，统一处理过期时间和路径
    function setCookie(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays*24*60*60*1000));
        var expires = "expires="+ d.toUTCString();
        // 指定根路径，确保全站都能读取该Cookie
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    }

    // 初始状态处理：Cookie不存在或为"true"时显示提示栏，否则隐藏
    var initialCookie = getCookie("cookiesshow");
    if (initialCookie === "" || initialCookie === "true") {
        setCookie("cookiesshow", "true", 30); // 设置30天过期，可按需调整
        $("#cookiebar").show();
    } else {
        $("#cookiebar").hide();
    }

    // 点击按钮的逻辑
    $("#cookiebutton").click(function(){
        var cookie = getCookie("cookiesshow");
        console.log(cookie);
        if (cookie === "true") {
            $("#cookiebar").hide(1000);
            setCookie("cookiesshow", "false", 30);
        }
    })
});
</script>
<div class="cookiebar" id="cookiebar">
    <span>This web using cookies. If you disagree with using cookies, please leave this page. </span>
    <button class="cookiebutton" id="cookiebutton">Accept cookies</button>
</div>

修复细节说明 #

1. 新增setCookie方法，统一处理Cookie的过期时间和路径，避免Cookie在不同页面失效或刷新后丢失的问题。
2. 初始判断改用严格相等===，避免类型转换导致的逻辑错误：当Cookie不存在（返回空串）或者值为"true"时，设置Cookie为"true"并显示提示栏；如果Cookie已经是"false"，则直接隐藏。
3. 点击按钮的逻辑保留了你的需求：判断Cookie值为"true"时，隐藏提示栏并将Cookie设为"false"。

这样修改后，你的功能就能正常工作了：首次访问时设置cookiesshow=true并显示提示栏，点击按钮后隐藏栏并把Cookie改为false，再次访问时会直接隐藏提示栏。

内容的提问来源于stack exchange，提问作者Martys