2

我无法设置 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”开关的代码。

任何帮助或建议将不胜感激。

4

1 回答 1

0

你缺少的是调用一些代码来设置隐藏页脚，如果它以前是隐藏的。你永远不会这样做。该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';
    }   
}

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

<script>
    checkFooter();
</script>
于 2013-07-25T11:06:08.740 回答