2

デイ/ライト バックグラウンド スイッチの JavaScript コードをテストしていますが、どうすればよいかわかりません。私はJavaScriptの初心者なので、新しいことを学んでいます。

それで、私は何をしたいですか？
たとえば、ボタン「日」(背景を黄色に変更)をクリックすると、ページが更新された後、黄色の背景のスタイルがコードに残ります。Cookies/LocalStorage について聞いたことがありますが、このコードに実装する方法がわかりません。

これを行うより簡単な方法を知っている場合は、コード全体を自由に変更してください。ただし、なぜそれが優れているのか、なぜそのようにする必要があるのか​​ を説明してください.

よろしくお願いします。

コードは次のとおりです。

HTML:

<body id="body">
    <input type="button" onclick="day();" value="Day" />
    <input type="button" onclick="night();" value="Night" />
    <input type="button" onclick="reset();" value="Reset" />   
</body>

CSS:

.darkSwitch {
  background: #808080;
}
.lightSwitch {
  background: #ffff99;
}

JavaScript:

function day() {
    body.className = "lightSwitch";
};
function night() {
    body.className = "darkSwitch";    
};
function reset() {
    body.className = "";
};

$(function() {
    var button = $('input[type=button]');
    button.on('click', function() {
        button.not(this).removeAttr('disabled');
        $(this).attr('disabled', '');
    });
});
4

2 に答える 2

1

最終編集: ページの読み込み時に選択したボタンを無効にするようになりました。コードはこの投稿にありません。最新の JSFiddle を参照してください。

説明

私がしたこと：

  • コードは<script>末尾のタグの間に入れます<body> （個人的な好み）
  • 要素のイベントにパラメータを追加しましたevent。onClickbutton
  • 要素のイベントのevent.preventDefault()開始時に追加しました。ボタンをクリックしてもページが更新されないようにします。onclickbutton

警告:ページ内のすべてのボタンが同じように動作します。他のボタンがある場合は、それら 3 つのボタンに別のクラスを追加button.myClassし、要素にイベントをバインドすることをお勧めします。

  • button状態変化に条件を追加したので、リセットボタンが無効になりません。
  • eval($(this).val().toLowerCase()+"();");クリックされた の値を取得し、buttonそれに関連付けられている関数を実行します。

解決

HTML

<body id="body">
    <input type="button" class="changeBg" onclick="day();" value="Day" />
    <input type="button" class="changeBg" onclick="night();" value="Night" />
    <input type="button" class="changeBg" onclick="reset();" value="Reset" />
</body>

JavaScript

( JSFiddle ) <--これをチェック クラスと Cookie で更新

function day() {
    body.className = "lightSwitch";
};

function night() {
    body.className = "darkSwitch";
};

function reset() {
    body.className = "";
};

$(function () {
    /* RegEx to grab the "bgColor" cookie */
    var bgColor = document.cookie.replace(/(?:(?:^|.*;\s*)bgColor\s*\=\s*([^;]*).*$)|^.*$/, "$1");
    
    var button = $('input[type=button].changeBg');
    button.on('click', function (event) {
        event.preventDefault();
        
        /* Executing the function associated with the button */
        eval($(this).val().toLowerCase() + "();");

        button.not($(this)).removeAttr('disabled');
        if ($(this).val() != "Reset") {
            $(this).attr('disabled', '');
            
            /* Here we create the cookie and set its value, does not happen if it's Reset which is fired. */
            document.cookie = "bgColor="+$(this).val();
        }
    });
    
    /* If the cookie is not empty on page load, execute the function of the same name */
    if(bgColor.length > 0)
    {     
        eval(bgColor.toLowerCase()+'()');
         
        /* Disable the button associated with the function name */
        $('button[value="'+bgColor+'"]').attr("disabled","disabled");
    }
});
于 2013-06-14T16:47:58.880 に答える
-2

localStorage がサポートされていない場合を除き、Cookie を使用しないことをお勧めします。彼らはあなたのサイトを遅くします。

if(localStorage){

   localStorage.setItem("bgColor", "lightSwitch");

}else{

   document.cookie = "bgColor=lightSwitch";

}
于 2013-06-17T13:13:26.627 に答える