HTML5 localStorage:大JSON,特定值作为更改CSS(收藏夹列表)的条件
HTML5 localStorage: Big JSON, specific value as condition to change CSS (favorite list)
给定localStorage中的一个大型JSON表和一个给定的键,如何访问关联的值,并将其用作CSS的条件?
给定以下JSON:
var data = [
{ 'myKey': 'A', 'status': 0 },
{ 'myKey': 'B', 'status': 1 },
{ 'myKey': 'C', 'status': 1 },
{ 'myKey': 'D', 'status': 1 }
];
以下html进行样式化:
<p id="A">AA</p>
<p id="B">BB</p>
<p id="C">CC</p>
<p id="D">DD</p>
和以下css:
.status1 { color: green; }
.status0 { color: red; }
这是"点击最爱/最爱列表/最爱的明星"背后的基本原则之一。
关于fiddle的工作示例,JQuery
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()
//META.Fn: pullVal
function getJsonVal(json, itemId) {
for (var i in json) {
if (json[i].myKey == itemId) {
return json[i];
}
}
}
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);
}
3.加载时启动功能:
loadSwitchCSS($('p'), 0);
相关文章:
- 使用HTML5 localStorage和jQuery添加到收藏夹/书签
- 如何从网站获得apple touch图标,如果没有;不存在,则显示收藏夹
- 添加到Safari中的收藏夹/书签栏(CMD+D)
- 角度添加到收藏夹
- JS CSS线夹重置(TextOverflowClamp.JS)
- 单击复选框时将此元素添加到收藏夹数组 + 后 Ajax 元素关系
- 从javascript更改css文件夹
- HTML - 添加和删除收藏夹
- 显示本地存储中的用户收藏夹
- 如何创建一个“;收藏夹栏”;通过将表格元素拖动到下拉菜单中
- 如何在javascript中添加到所有浏览器的收藏夹/书签
- 为什么收藏夹不可见
- 使用JQuery添加收藏夹/保存按钮
- 持久收藏夹列表
- 使用ng类创建收藏夹图标
- 如何自动创建由许多收藏夹URL组成的精灵
- 带有收藏夹选项的多图像页面-如何使用localStorage来记住哪些图像受到了青睐
- 如何在单击时以编程方式将网页列表添加到浏览器收藏夹中
- 向收藏夹添加一个插入javascript的按钮
- HTML5 localStorage:大JSON,特定值作为更改CSS(收藏夹列表)的条件