Javascript HTML5本地存储:大JSON,特定值作为更改CSS的条件(收藏夹列表)
给定localStorage中的一个大JSON表和一个给定的键,如何访问关联的值,并将其用作CSS的条件 给定以下JSON:Javascript HTML5本地存储:大JSON,特定值作为更改CSS的条件(收藏夹列表),javascript,jquery,json,local-storage,Javascript,Jquery,Json,Local Storage,给定localStorage中的一个大JSON表和一个给定的键,如何访问关联的值,并将其用作CSS的条件 给定以下JSON: var data = [ { 'myKey': 'A', 'status': 0 }, { 'myKey': 'B', 'status': 1 }, { 'myKey': 'C', 'status': 1 }, { 'myKey': 'D', 'status': 1 } ]; loadSwitchCSS($('p'), 0); 要设置样式的以下html: <p
var data = [
{ 'myKey': 'A', 'status': 0 },
{ 'myKey': 'B', 'status': 1 },
{ 'myKey': 'C', 'status': 1 },
{ 'myKey': 'D', 'status': 1 }
];
loadSwitchCSS($('p'), 0);
要设置样式的以下html:
<p id="A">AA</p>
<p id="B">BB</p>
<p id="C">CC</p>
<p id="D">DD</p>
这是“点击收藏夹/收藏夹列表/收藏夹明星”背后的基本原则之一。工作示例
0。应用程序的诀窍!:JSON和本地存储
/* To store JSON in localStorage, you compress it as string */
localStorage["results"] = JSON.stringify(data); // or lS.restults
/* Whenever you want to work on it, need to uncompress the JSON */
var data = JSON.parse(localStorage["results"]);
1。创建元函数:getJsonVal()
2。函数在注入CSS类之前检查JSON值
//META.Fn: loadSwitch [check localStorage & set CSS
function loadSwitchCSS($set, i) {
setTimeout(function () {
var myID = $set.eq(i).attr('id'); // a. Get key [my case: from the html ID]
alert("look at:"+ myID);
var val = getJsonVal(data, myID).status;
// alert(data);
if (val == 1) { // c. CSS remove-add: so if...else... CSS
$set.eq(i).removeClass().addClass('status1');
} else {
$set.eq(i).removeClass().addClass('status0')
}
if (i < $set.length - 1) {
loadSwitchCSS($set, i + 1);
}
}, 100);
}
//META.Fn: loadSwitch [check localStorage & set CSS
function loadSwitchCSS($set, i) {
setTimeout(function () {
var myID = $set.eq(i).attr('id'); // a. Get key [my case: from the html ID]
alert("look at:"+ myID);
var val = getJsonVal(data, myID).status;
// alert(data);
if (val == 1) { // c. CSS remove-add: so if...else... CSS
$set.eq(i).removeClass().addClass('status1');
} else {
$set.eq(i).removeClass().addClass('status0')
}
if (i < $set.length - 1) {
loadSwitchCSS($set, i + 1);
}
}, 100);
}
loadSwitchCSS($('p'), 0);