代碼在Google Chrome中不起作用，但在Mozilla中可以正常工作

Question

我正在用餅干做這個小提琴。 這是鏈接 。 但它第一次與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的右括號）。 無論如何， 這是一個更新的小提琴 ，（為了完整性）這是代碼。 我對其進行了更多優化，但是基本上是相同的：

$(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()
    }
});

您可以在這里看到這對我來說就像一種魅力（ 不帶包裹選項）

只是一個說明，您正在使用許多 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查詢，因此我認為我建議您多加注意。