0

基本上,我想打开或关闭一个复选框,并将此设置分别保存为 localStorage 项目中的 1 或 0。需要为用户存储设置。

考虑到我有一个 id 为“x”的复选框输入,这个脚本可以完美运行:

$("#x").click(function () {
    if (checkboxstore == false) {
        alert("Tickbox has been turned on");
        localStorage.setItem("checkboxstore", 1);
    } else if (checkboxstore == true) {
        alert("Tickbox has been turned off");
        localStorage.setItem("checkboxstore", 0);
    };
});

可悲的是,它只工作一次。页面加载,输入为“关闭”,我单击输入,然后收到警报

“复选框已打开”

并且 localStorage 项“Tickbox”设置为 1。 非常棒。当页面加载并且输入为“打开”时,它的工作方式相反。

但是,就是这样。无论我如何切换输入,尽管刻度发生变化,localStorage 项目都不会更新!无论我是打开还是关闭刻度,我都会不断收到相同的消息,“复选框已打开”。

它仅适用于初始加载或重置 localStorage 值。

为什么是这样?如何在不刷新的情况下让它一遍又一遍地工作?

4

2 回答 2

1

我创建了一个 plunker,如果你愿意,你可以玩它。 http://plnkr.co/edit/iYLFc8V1PzZ5tBJu16g5?p=preview

$("#x").change(function(e) {
        if (e.currentTarget.checked) {
        console.log("true");
    } else if (e.currentTarget.checked) {
        console.log("false");
    }
  });
于 2013-07-29T12:11:22.473 回答
0

你需要两件事:

(1) 一个函数,它会在文档加载时根据 localStorage 中的值更改复选框的状态。类似以下(未经测试的)代码应该做的事情:

$( document ).ready( function() {
  if( localStorage.getItem( 'checkboxstore' ) ) {
    $('#x').prop( 'checked', 'checked' );
  } else {
    $('#x').removeProp( 'checked' );
  }
} );

(2) 您需要替换checkboxstorelocalStorage.getItem('checkboxstore'). 它现在检查一个不存在的变量。

$("#x").click(function () {
    if (localStorage.getItem('checkboxstore') == false) {
        alert("Tickbox has been turned on");
        localStorage.setItem("checkboxstore", 1);
    } else {
        alert("Tickbox has been turned off");
        localStorage.setItem("checkboxstore", 0);
    };
});
于 2013-07-29T12:13:24.257 回答