Question

我正在研究这个小提琴。这是link。但它第一次与Mozilla一起工作正常。当我删除所有的cookie但当我重新打开页面时，它会直接进入第二个div，必须在第一个div点击按钮后显示。以及必须显示第二个div，刷新时必须隐藏第一个div。甚至这在任何方面都不适用于chrome。任何改进的想法或建议。提前致谢。这是我的代码：

       $('#sbut1').click(function() { 
       $('.cont1').show();
     $('#log1').hide();
        $.cookie('shown', true);

        });

     $(function() {
      if ($.cookie('shown')) {
         $('#sbut1').click()
       }
        });

Answer 1

更新

我的回答中有一个轻微的语法错误（忘记了IIFE的括号）。无论如何，here's an updated fiddle和（为了完整性）这里是代码。我已经对它进行了一些优化，但它基本上是相同的：

$(function()
{
    (function(sbut1)
    {
        (function(log1, cont1)
        {
            sbut1.on('click',function()
            {
                cont1.show();
                log1.hide();
                $.cookie('shown', true);
                $(this).off('click');
            });
        }($('#log1'), $('.cont1')));
        if ($.cookie('shown'))
        {
            sbut1.trigger('click');
        }
    }($('#sbut1')));
});

有几件事似乎无关紧要（比如绑定和取消绑定事件监听器），但小提琴中的注释解释了为什么我这样做。主要原因是清理对DOM的任何引用，以便将它们标记为垃圾回收同样，这个代码在FF和chrome

中都适用于我

回应我上次的评论，同样的事情，只有vanillaJS：

window.addEventListener('load', function l()
{
    var cookie = (function(trueUndef)
    {
        var clean = (localStorage || document.cookie);
        return function(name, val)
        {
            if (val === trueUndef)
            {
                if (clean === localStorage)
                {
                    return clean.getItem(name);
                }
                val = clean.split(name + '=')[1];
                return val ? val.match(/^[^;]+/)[0] : trueUndef;
            }
            if (clean === localStorage)
            {
                return clean.setItem(name, val);
            }
            return !!(clean = name + '=' + val);
        };
    }()),
    sbut1 = document.getElementById('sbut1');
    sbut1.addEventListener('click', (function clickHandler(log1, cont1)
    {
        return function(i)
        {
            log1.style.display = 'none';
            for(i=0;i<cont1.length;i++)
            {
                cont1[i].style.display = 'block';
            }
            cookie('foo', true);
            sbut1.removeEventListener('click', clickHandler, false);
        };
    }(document.getElementById('log1'), document.getElementsByClassName('cont1'))), false);
    if (cookie('foo') === 'true')
    {
        sbut1.dispatchEvent(new Event('click'));
    }
    window.removeEventListener('load',l, false);
}, false);

我看了你的小提琴，并将代码更改为：

$(function()
{
    $('#sbut1').click(function()
    { 
        $('.cont1').show();
        $('#log1').hide();
        $.cookie('shown', true);
    });
    if ($.cookie('shown'))
    {
        $('#sbut1').click()
    }
});

对我来说，它就像魅力一样（选项没有包裹 - ）as you can see here

只是一个侧面说明，你正在使用很多的DOM选择器，它们在整个地方调用函数，并且过多地查询DOM。如果您在某处分配了对这些DOM节点的引用，那么您的代码可以更高效：

$(function()
{
    (function(sbut1, log1, cont1)
    {
        sbut1 = sbut1 || $('#sbut1');//safety-net
        log1 = log1 || $('#log1');
        cont1 = cont1 || $('.cont1');
        sbut1.click(function()
        {
            cont1.show();
            log1.hide();
            $.cookie('shown', true);
        });
        if ($.cookie('shown'))
        {
            sbut1.click();
        }
    }($('#sbut1'), $('#log1'), $('.cont1')));
});

当然，IIFE是可选的，但它将DOM引用包装在一个范围内，因此它们仅适用于脚本中实际需要它们的那些部分。仍然有很多方法可以改进这些代码，但是过多的DOM查询很容易避免，所以我想我建议你照顾它们。

代码无法在谷歌浏览器中工作，但与Mozilla一起正常工作

1 个答案: