javascript - CSSコードの前にjQueryをロードするには?

Question

訪問者が 5 つのボタンのいずれかをクリックして背景色を変更できるブログを開発しています。

背景色を変更するボタン

$(function(){

        //Verificando se já existe algum esquema de cor selecionado
        var esquemaCor = parseInt(getCookie("cor_de_fundo"));

        switch(esquemaCor){
            case 1:
                $('body').css('background-color','#0A0A0A');
                break;
            case 2:
                $('body').css('background-color','#766777');
                break;
            case 3:
                $('body').css('background-color','#EEE6EE');
                break;
            case 4:
                $('body').css('background-color','#9F00A9');
                break;
            case 5:
                $('body').css('background-color','#420668');
                break;
            default:
                $('body').css('background-color','#9F00A9');
        }

        $('#cor_01').click(function(){
            setCookie('cor_de_fundo', 1);
            $('body').css('background-color','#0A0A0A');
        });
        $('#cor_02').click(function(){
            setCookie('cor_de_fundo', 2);
            $('body').css('background-color','#766777');
        });
        $('#cor_03').click(function(){
            setCookie('cor_de_fundo', 3);
            $('body').css('background-color','#EEE6EE');
        });
        $('#cor_04').click(function(){
            setCookie('cor_de_fundo', 4);
            $('body').css('background-color','#9F00A9');
        });
        $('#cor_05').click(function(){
            setCookie('cor_de_fundo', 5);
            $('body').css('background-color','#420668');
        });
    });

標準色は紫色のブログです。

background: # 9F00A9

ユーザーがボタンイベントの背景色を変更すると、完全に機能します。問題は、彼がブログのページ間を移動するときです。彼が選択した色を充電する前に、たとえば黒の背景色は、紫から黒への後に最初に読み込まれます。(テストブログをご覧ください: www.obovio.com.br ) ユーザーが選択した最初の色を常に持ち歩くにはどうすればよいですか?

score 1 · Accepted Answer

あなたが持っているように、$(foo)(where foois a function ) は「呼び出す前にドキュメントがロードされるまで待つ」ことを意味しfooます。これを行わないと、 HTMLElementsが存在することを保証できません。ただし、呼び出しをNode<script>の後/子に移動すると、コードが呼び出されるまでにそれが存在すると安全に想定できるはずです。

たとえば、関数は要素のみを使用するため、 foo<body>という名前を付けてから実行します。

<body>
    <script type="text/javascript">
foo();
    </script>
    <!-- rest of body contents -->
</body>

これは、エラーではないと想定しても安全なときに、できるだけ早く呼び出されることを意味しthrowます。

score 0 · Accepted Answer

背景色を保存するために localstorage を使用してみましたか

$(function(){
 if(localStorage.bgcolor==undefined)
    localStorage.bgcolor="white" //default color that appears first time

 $('body').css('background-color',localStorage.bgcolor);

   $('#cor_01').click(function(){
     localStorage.bgcolor = "#0A0A0A";
     $('body').css('background-color',localStorage.bgcolor);
   });
   $('#cor_02').click(function(){
     localStorage.bgcolor = "#766777"
     $('body').css('background-color',localStorage.bgcolor);
   });
   // similar code for other buttons
});

HTML5 ローカルストレージ

score 0 · Accepted Answer

ページ全体が再度読み込まれないようにするために、履歴 API が必要なようですね。 http://diveintohtml5.info/history.html

その例では、ページのリロードは必要ありません: http://diveintohtml5.info/examples/history/casey.html

score 0 · Accepted Answer

これがあなたのhtmlだと言ってください

 <body>
 <script>
 $( document ).ready(function() {
     //by assigning this to a function you ensure the page has loaded and it exists before you call it too early
     backgroundColour(getCookie("cor_de_fundo"));
 });
 </script>
</body>

これが新しい関数です: function backgroundColour(cookie) {

    //Verificando se já existe algum esquema de cor selecionado
    var esquemaCor = parseInt(cookie);
    //This way there is never a risk of auto-default unless the cookie is empty, but this is option, can probably keep using default anyway
    if(!esquemaCor) {
        $('body').css('background-color','#9F00A9');
    }
    else {
    switch(esquemaCor){
        case 1:
            $('body').css('background-color','#0A0A0A');
            break;
        case 2:
            $('body').css('background-color','#766777');
            break;
        case 3:
            $('body').css('background-color','#EEE6EE');
            break;
        case 4:
            $('body').css('background-color','#9F00A9');
            break;
        case 5:
            $('body').css('background-color','#420668');
            break;
    }

    $('#cor_01').click(function(){
        setCookie('cor_de_fundo', 1);
        $('body').css('background-color','#0A0A0A');
    });
    $('#cor_02').click(function(){
        setCookie('cor_de_fundo', 2);
        $('body').css('background-color','#766777');
    });
    $('#cor_03').click(function(){
        setCookie('cor_de_fundo', 3);
        $('body').css('background-color','#EEE6EE');
    });
    $('#cor_04').click(function(){
        setCookie('cor_de_fundo', 4);
        $('body').css('background-color','#9F00A9');
    });
    $('#cor_05').click(function(){
        setCookie('cor_de_fundo', 5);
        $('body').css('background-color','#420668');
    });
});

編集：背景が背景色とは別に設定されていることに気付いたので、答えを変更します。

これを head タグ (スタイルシートの下) に入れてみませんか?

<script>
if (getCookie("cor_de_fundo")) {
$('body').css('background','url("http://4.bp.blogspot.com/-SZodpKgdjwk/UkCj20gd4XI/AAAAAAAADZk/tIAmBbkoecU/s1600/square_bg.png") repeat');
}
</script>

そうすれば、Cookie が設定されている場合、ドットは表示されますが、その紫色は失われます。では、この問題は発生しないのでしょうか。

あなたの論理が間違っている可能性があるようです。

あなたは「ドットで紫色の背景を入れてください。クッキーがある場合は、ドットで背景の上に背景色を入れてください。

代わりに、「クッキーがあれば背景色をドットで、クッキーがなければ背景色を紫でドットを入れてください」と言ってみてはいかがでしょうか。

現時点では、「背景を紫色の URL に設定し、Cookie がある場合は色を変更してください」と言います。

javascript - CSSコードの前にjQueryをロードするには?

4 に答える 4

Related

Reference