2

我正在测试日/光背景切换的 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', '');
    });
});
4

2 回答 2

1

最后编辑：现在禁用页面加载时选择的按钮，代码不在此帖子中，请参阅最新的 JSFiddle

解释

我做了什么：

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

警告：所有按钮在您的页面中的行为都相同。如果您有其他按钮，我建议您为这三个按钮添加另一个类并将事件绑定到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

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

if(localStorage){

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

}else{

   document.cookie = "bgColor=lightSwitch";

}
于 2013-06-17T13:13:26.627 回答