在刷新时使用复选框保持单元格颜色更改

Question

我有单元格在复选框检查时更改背景颜色，我研究了如何在刷新时保持复选框处于选中状态（尽管回头看我认为这不再有效），但我不知道如何保持颜色更改刷新。我实际上根本不知道 Javascript，这都是来自其他问题，但我希望它能够工作。如果我做错了什么，请纠正我，不要以为我是故意的，因为我完全不知道自己在做什么。

$(document).ready(function() {
$(".colourswitcher").click(function() {
    if($(this).is(":checked")) {
        $(this).closest("td").css("background","#ff3333");  
    }else {
        $(this).closest("td").css("background","#202020");
    } 
});
});

$(function(){
var test = localStorage.input === 'true'? true: false;
$('input').prop('checked', test || false);
});

$('input').on('change', function() {
localStorage.input = $(this).is(':checked');
console.log($(this).is(':checked'));
});

Answer 1

由于您是 javascript 新手，我要问一个愚蠢的问题：您是否包含 jQuery？

您提取的这段代码使用了 jQuery，这是一个非常有用的库（不是内置于 javascript 的），它已变得如此普遍，以至于人们在询问或回答涉及它的问题时通常甚至不说出它的名字.但是任何时候你看到 $ 符号，你可能正在处理 jQuery。

您需要在 html 文件中包含库文件，以便它知道这些特殊符号和语法是什么： <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

如果您在 Google Chrome 中测试这些东西，请按 F12 并查看开发者控制台。当您缺少此类内容时，您会看到红色的“未定义”错误。

Answer 2

假设您的工作知识比我的第一个答案更好，这是另一个答案：

当 html 文档已加载并附加一个事件侦听器以在单击复选框时相应地更改最近的单元格背景颜色时，您的代码的第一位运行。不过这里要注意两点。 1)该行为将附加到所有具有“颜色切换器”类的 html 元素，而不仅仅是输入。 2) 该行为假定点击的内容具有“已选中”属性，而只有复选框才具有此属性。

我认为中间位应该在第一次加载页面时运行一次，以从 localStorage 获取复选框的保存状态。该位可以移动到文档就绪位中。

代码的第三部分将事件侦听器附加到每个输入元素（不仅仅是复选框），这样每次单击时，都会将检查的真/假状态保存在 localStorage 中。

localStorage 是一种在浏览器刷新之间保存信息的便捷方式。你可以保存任何你想要的东西，即。 localStorage.CandyCanes = 7，该变量将存储在用户的浏览器中，以后可以调用。请注意，您的上述代码仅在有一个复选框时才能按预期工作，因为您在 localStorage 中使用一个插槽或一个变量来保存：localStorage.input。

这就是我现在要详细说明的全部内容。如果这超出了您的预期，那么是时候静下心来学习，或者让专业人士参与其中。