首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在刷新时使用复选框保持单元格颜色更改

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

Stack Overflow用户
提问于 2014-09-09 15:54:41
回答 2查看 142关注 0票数 1

我让单元格在checkbox复选框中改变背景颜色,我知道如何在刷新时保持复选框处于选中状态(尽管回过头来看,我认为这不再有效),但我不知道如何在刷新时保持颜色更改。我实际上根本不知道Javascript,这都是因为其他问题,但我希望它能工作。如果我做了完全错误的事情,请纠正我,不要假设我是故意的,因为我完全不知道我在做什么。

代码语言: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'));
});
EN

回答 2

Stack Overflow用户

发布于 2014-09-13 11:34:07

既然您是javascript的新手,那么我将问一个愚蠢的问题:您是否包含了jQuery?

您提取的这段代码使用了jQuery,这是一个非常有用的库(不是内置到javascript中的),它已经变得如此常见,以至于人们在询问或回答涉及它的问题时通常都不会说出它的名字。但是,每当您看到$表示法时,您很可能正在处理jQuery。

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

如果你在Google Chrome中测试这个东西,按F12并查看开发人员控制台。当你缺少这样的东西时,你会看到红色的"undefined“错误。

票数 0
EN

Stack Overflow用户

发布于 2014-09-13 12:01:56

这是另一个答案,假设你比我的第一个答案有更好的工作知识:

代码的第一部分在加载html文档时运行,并附加了一个事件侦听器,以便在单击复选框时相应地更改最近的单元格背景颜色。不过,这里要注意两件事。1)该行为将被附加到具有类"colourswitcher“的所有html元素,而不仅仅是输入。2)该行为假定所单击的内容有一个属性"checked",只有复选框才有这个属性。

我假设中间的部分应该在页面第一次加载时运行一次,以从localStorage获取复选框的保存状态。这个位可以移到文档就绪位中。

代码的第三部分将事件侦听器附加到每个输入元素(不仅仅是复选框),以便每次单击一个元素时,都会在localStorage中保存选中的true/false状态。

localStorage是一种在浏览器刷新之间保存信息的便捷方法。你可以保存任何你想要的东西,例如。localStorage.CandyCanes =7,该变量将存储在用户的浏览器中,并可在以后调用。注意,上面的代码只有在只有一个复选框的情况下才能正常工作,因为您在localStorage中使用了一个插槽或一个变量来保存: localStorage.input。

这就是我现在要详细说明的所有内容。如果这超出了你的预期,那么是时候坐下来学习了,或者让专业人士参与进来。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/25739346

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档