javascript - 日/夜模式 - CSS + JQuery - Cookies？

转载作者：太空宇宙更新时间：2023-11-03 19:33:43

我正在测试白天/浅色背景切换的 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', '');
    });
});

最佳答案

上次编辑:现在在页面加载时禁用所选按钮，代码不在这篇文章中，see the latest JSFiddle

解释

我做了什么:

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

警告:ALL按钮在您页面中的行为相同。如果你有其他按钮，我建议你为这三个按钮添加另一个类并将事件绑定(bind)到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");
    }
});