今天踩坑了,在这里记一下。
我想做一个列表,开始是一个一个复制粘贴,然后发现这样太不灵活了,如果我有更多内容要填难道还要再一个一个复制吗?
所以我想到直接用JS动态生成最好,我的思路是这样的:
//首先,我需要先从本地读取数据,判断本地是否有相关数据
//如果如果本地没有数据 通过Ajax向服务器请求相关数据
//将请求的数据解析 存入本地 当然要给它一个独一无二的键名(我是采用JSON格式存储的)
//如果本地有数据 从本地将相关数据读出来,然后解析
//将解析后的数据插入到页面中
HTML代码
这没啥好看的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="../common/mui.js"></script>
<link href="../common/mui.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="questionList.css"/>
<link rel="stylesheet" type="text/css" href="../common/app.css"/>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
<a class=" mui-icon mui-icon-plusempty mui-pull-right" href="../discover/discover.html"></a>
<h1 class="mui-title">试题列表</h1>
</header>
<div class="mui-card" >
<ul class="mui-table-view" id="message">
<!--将要被替换的内容-->
</ul>
</div>
<div class="mui-content"></div>
<script src="questionList.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
JS代码
mui.init();
mui.plusReady(function() {
var QList = {Q1: '001', Q2: '002', Q3: '003'};
//测试用再Storage中存储基础数据 一个JSON对象
var Q1 = {title: '单元测试一',time:'18:00',doc: '一个西瓜分四瓣,猴子拿走一块,还剩几块???????',opt: {A: '3块', B: '2块', C: '1块', D: '0块', ok: 'A'},analysis: '这个题目中提到了猴子,以此我们需要看是什么猴子。。。。'};
//@@@@这里踩坑!!!!!!注意:单引号写在{}外,每个属性名都必须用双引号,否则会抛出异常。
//因此需要在这里对对象字符串化 然后再存储 存储字符会更好
Q1 = JSON.stringify(Q1);
if(plus.storage.setItem('Q1', Q1) == null){
console.log('Q1+++++存储成功');//返回 null 表示存储成功
}
//####构造习题列表页面
var Q = JSON.parse(plus.storage.getItem('Q1'));
console.log('JSON对象:' + Q);
var title = Q.title;
var time = Q.time;
var doc = Q.doc;
var opt = Q.opt;
var analysis = Q.analysis;
// for 创建5个子页面
var insertHTML = '';
for(var i=0;i<3;i++){
var title = '单元测试' + i;
var Doc = doc;
var id = 'Q' + i;
console.info(title + '+++++++++++' + Doc);
insertHTML = insertHTML
+ '<li class="mui-table-view-cell mui-media" id="'
+ id
+'"><div class="mui-slider-handle mui-table"><a href="javascript:;"><div class="mui-media-body"><span class="nickname">'
+ title
+ '</span><span class="list-time">'
+ time
+ '</span><p class="mui-ellipsis">'
+ Doc
+ '</p></div></a></div></li>';
}
document.getElementById('message').innerHTML = insertHTML;
document.getElementById('Q1').addEventListener('tap', function() {
mui.openWindow({
url: '../questionSet/questionSet.html',
id: 'questionSet'
});
});
});