Question

嘿伙计们，我的剧本有点不对劲。我有一个div #searchbox和一个div #searchboxtrigger。

相当简单：#searchbox隐藏了display：none。如果点击#searchboxtrigger我正在滑动#searchbox并且我正在保存一个COOKIE。如果我再次单击#searchboxtrigger，#searchbox将再次滑动，并且cookie将设置为null。

因此我正在使用jquery cookie插件。

onload我检查cookie是否已设置，因为如果设置了，则在页面加载时#searchbox应该是可见的。如果#searchbox再次滑动并且cookie设置为null，我不希望它可见。

的onload：

    if($.cookie('search_visible') == 'true'){
        $('#searchbox').show();
        console.debug('is visible');
    }else{ 
        $('#searchbox').hide();
        console.debug('is hidden');
    }

的onclick：

$('#searchboxtrigger').click( function() {
    if($.cookie('search_visible') == 'true') {
        $('#searchbox').slideUp('fast');
        $.cookie('search_visible', null);
        console.debug('is hidden');
    } else {
        $('#searchbox').slideDown('fast');
        $.cookie('search_visible', 'true');
        console.debug('is visible');
    } 
});

你能看到什么奇怪的东西吗？有时#searchboxtrigger只是没有响应，并且控制台在重新加载时会“隐藏”十几次。有什么我忘了想的吗？

Answer 1

只需读取cookie即可获取初始状态，并在状态发生变化时写入。不要将它用于内部状态，为此保留JavaScript var。

我还建议将searchboxtrigger设为<a>而不是<div>，并预先计算您正在重复使用的jQuery DOM元素。

这样的事情：

$(document).ready(function() {

    var searchVisible = $.cookie('search_visible') == 'true';
    var searchBox = $('#searchbox');

    if (searchVisible) {
        searchBox.show();
    } else { 
        searchBox.hide();
    }

    searchBox.click(function() {
        if (searchVisible) {
            searchBox.slideUp('fast');
            $.cookie('search_visible', null);
            searchVisible = false;
        } else {
            searchBox.slideDown('fast');
            $.cookie('search_visible', 'true');
            searchVisible = true;
        } 
        return false;
    });

});

jquery：buggy cookie脚本？不总是工作？

1 个答案: