【问题标题】：Day/Night mode - CSS + JQuery - Cookies?日/夜模式 - CSS + JQuery - Cookies？
【发布时间】：2013-06-14 16:30:13
【问题描述】：

我正在测试日/光背景切换的 javascript 代码，但我不知道该怎么做。我是 javascript 的新手，所以我正在学习新东西。

那我想做什么？
例如，当我单击按钮“Day”（将背景更改为黄色） 时，我希望黄色背景的样式在页面刷新后保留在代码中。我听说过一些关于 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', '');
    });
});

【问题讨论】：

cssdeck.com/labs/4ksohwya此链接没有任何按钮，但它有你要找的东西。代码在编辑器中提到。观察背景几秒钟

标签： javascript css switch-statement reset light

【解决方案1】：

上次编辑：现在禁用页面加载时选择的按钮，代码不在此帖子中，see the latest JSFiddle

说明

我做了什么：

代码放在<script>标签之间<body>末尾（个人喜好）
我在button 元素的onClick 事件中添加了参数event。
我在button 元素的onclick 事件的开头添加了event.preventDefault()：确保在单击按钮时不会刷新页面。

警告：所有按钮在您的页面中的行为相同。如果您还有其他按钮，我建议您为这三个按钮添加另一个类，并将事件绑定到 button.myClass 元素上。

我在button 状态更改上添加了一个条件，因此reset 按钮不会被禁用。
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");
    }
});

【讨论】：

非常感谢您的回答、解释和建议。这只是一个带有日/夜/重置按钮的简单页面，没有任何其他按钮，但我必须寻找那个“button.myClass”;-) 否则那个“重置”功能也很棒，我没有不要那样想。 --- 我还在等待关于 cookie/localstorage 的回答 :-)

【解决方案2】：

我建议您不要使用 cookie，除非 localStorage 不受支持。它们会减慢您的网站速度。

if(localStorage){

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

}else{

   document.cookie = "bgColor=lightSwitch";

}

【讨论】：