根据存储在本地存储中的复选框是否处于活动/选中状态来更改CSS

Question

我希望能够检查是否已根据本地存储中的值检查了复选框。如果选中它，我想将背景颜色应用于页面的一部分。

Page to apply CSS http://upskillapps.com/resources/1.png

我的本​​地存储数据如下所示：

Local storage data http://upskillapps.com/resources/2.png

如果完成复选框处于活动状态，我想应用绿色背景，如果不是橙色背景。

到目前为止，我有以下代码，但我是JS的新手，因此需要做很多工作：

function highlightComplete() {
  if (DevPlan.completion == 'true') {
    info-row.addClass('background-green');
  } else if (DevPlan.completion == 'false') {
    info-row.addClass('background-orange');
  } 
}

非常感谢任何帮助。

Answer 1

以下是您的一个例子：

-----------------
|        |       |
------------------
|        |  btn  |
------------------

基本上，这里的想法是检查页面加载的值并根据它设置CSS，然后等待用户输入一起更改值和CSS。

以下是此代码的实际效果：http://output.jsbin.com/yexahatoye

Answer 2

非常感谢Michael Parker的帮助。

我现在有一个解决方法，在摆弄一段时间并在此过程中学到很多东西：

    for (var i = 0; i < devPlan.length; i++) {
            var item = devPlan[i].tables.completion[0].active;
            if (item == true) {
                $('#' + i).find('.info-row').addClass('background-green');
            }
            else {
                $('#' + i).find('.info-row').addClass('background-amber');
            }
        }

要应用CSS，我使用了表行ID来应用CSS。希望它可以帮助别人。