0

私はクッキーを使ってこのフィドルに取り組んでいます。ここにリンクがあります。しかし、初めて Mozilla で問題なく動作します。すべてのCookieを削除すると、ページを再度開くと、最初のdivからボタンをクリックした後に表示する必要がある2番目のdivに直接移動します。同様に、2 番目の div を表示し、更新時に最初の div を非表示にする必要があります。これでもクロムでは機能しません。改善するためのアイデアや提案。前もって感謝します。ここに私のコードがあります:

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

        });

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

1 に答える 1

0

アップデート：

私の回答にはわずかな構文エラーがありました (IIFE の閉じ括弧を忘れていました)。とにかく、これは更新された 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とクロムの両方でうまく機能します

私の最後のコメントに応えて、同じこと、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を使用）

余談ですが、あなたは多くの 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 クエリは簡単に回避できるので、それらを処理することをお勧めします。

于 2013-06-26T11:17:54.360 に答える