代码无法在 google chrome 中运行，但在 Mozilla 中运行良好

Question

我正在研究这个关于 cookie 的小提琴。这是link。但它第一次在 Mozilla 上运行良好。当我删除所有 cookie 但当我重新打开页面时，它会直接转到第二个 div，该 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')));
});

有几件事可能看起来无关紧要（例如绑定和解除绑定事件侦听器），但小提琴中的 cmets 解释了我这样做的原因。主要原因是清理对 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()
    }
});

这对我来说就像一个魅力（带有选项no wrap - in head）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 查询，所以我认为我建议您注意这些。