Question

我无法设置Cookie以记住某些元素是否已被隐藏。我正在使用的脚本（来自这里的另一个答案）似乎在隐藏或显示我试图控制的元素方面起作用，但似乎没有在“记住”当前状态方面起作用重新加载/更改页面时。

在我正在开发的网站上，目前只有两个页面包含此代码：

http://www.emelisandetribute.com/music.php和http://www.emelisandetribute.com/videos.php

页面上使用的javascript（直接在标签之前）如下：

<script type="text/javascript">
function setCookie (name, value, expires, path, domain, secure) {
    document.cookie = name + "=" + escape(value) +
    ((expires) ? "; expires=" + expires : "") +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    ((secure) ? "; secure" : "");
}
function getCookie (name) {
    var cookie = " " + document.cookie;
    var search = " " + name + "=";
    var setStr = null;
    var offset = 0;
    var end = 0;
    if (cookie.length > 0) {
        offset = cookie.indexOf(search);
        if (offset != -1) {
            offset += search.length;
            end = cookie.indexOf(";", offset);
            if (end == -1) {
                end = cookie.length;
            }
            setStr = unescape(cookie.substring(offset, end));
        }
    }
    if (setStr == 'false') {
        setStr = false;
    } 
    if (setStr == 'true') {
        setStr = true;
    }
    if (setStr == 'null') {
        setStr = null;
    }
    return(setStr);
}
function hideFooter() {
    setCookie('footer_state', false); 
    document.getElementById('toggleoff').style.display = 'none';
    document.getElementById('toggleon').style.display = 'block';
    document.getElementById('footer1').style.display = 'none';
    document.getElementById('footer2').style.display = 'none';
    document.getElementById('footer3').style.display = 'none';
}
function showFooter() {
    setCookie('footer_state', null);
    document.getElementById('toggleoff').style.display = 'block';
    document.getElementById('toggleon').style.display = 'none';
    document.getElementById('footer1').style.display = 'block';
    document.getElementById('footer2').style.display = 'block';
    document.getElementById('footer3').style.display = 'block';
}
function checkFooter() {
    if (getCookie('footer_state') == null) { // if popup was not closed
        document.getElementById('toggleoff').style.display = 'block';
        document.getElementById('toggleon').style.display = 'none';
        document.getElementById('footer1').style.display = 'block';
        document.getElementById('footer2').style.display = 'block';
        document.getElementById('footer3').style.display = 'block';
    }   
}
</script>

相关元素的HTML是：

<div class="mainfooterwrapper">
    <span class="mainfootertoggle" id="toggleoff"><a href="#" onclick="hideFooter(); return false;">HIDE THIS</a></span>
    <span class="mainfootertoggle" id="toggleon" style="display:none"><a href="#" onclick="showFooter(); return false;">SHOW THIS</a></span>
    <div class="mainfooter1" id="footer1">
        <?php include "mainfooter1.php"; ?>
    </div>
    <div class="mainfooter2" id="footer2">
    <?php include "mainfooter4.php"; ?>
    </div>
    <div class="mainfooter3" id="footer3">
    <?php include "mainfooter3.php"; ?>
        <div style="clear:both; float:right; position:absolute; bottom:0; right:0; overflow:hidden; margin:5px 15px 5px 5px;">
        <?php include "footer.php"; ?>
        </div>
    </div>
</div>

通过阅读其他一些问题和答案，我尝试添加所有元素，既可以编辑CSS，也可以将代码添加到HTML中，但这会使元素完全消失。

我突然想到，我真正需要的是一段代码，当用户隐藏元素时会创建一个cookie，但如果元素再次显示，也会删除/修改cookie。我意识到我现在拥有的东西（虽然工作不正常）是有效的“ON”开关但没有“OFF”开关的代码。

非常感谢任何帮助或建议。

Answer 1

您缺少的是调用一些代码，如果先前已隐藏，则会设置隐藏页脚。你永远不会这样做。 checkFooter函数对此很明显。你现在不使用它，但你应该这样做。但是，您应该反转其逻辑，以便在getCookie('footer_state') == false时隐藏页脚。所以改变这样的功能：

function checkFooter() {
    if (getCookie('footer_state') == false) { // if popup WAS closed
        document.getElementById('toggleoff').style.display = 'none';
        document.getElementById('toggleon').style.display = 'block';
        document.getElementById('footer1').style.display = 'none';
        document.getElementById('footer2').style.display = 'none';
        document.getElementById('footer3').style.display = 'none';
    }   
}

现在确保在页面加载时调用该方法。使用Google Analytics和mCustomScrollBar脚本在页面底部添加以下代码：

<script>
    checkFooter();
</script>

设置cookie以记住隐藏的元素状态

1 个答案: