最近做了个问卷项目,其中一个需求是用户中途中断答题下次进入时能保存上次的答题状态。
因为题目和选项都是自定义的,可能会有很多,所以做了分页,每次翻页都会提交当前页填写的值,当用户进入答题页时后台调取该用户所有的答题信息,前台再进行判断,这里用到了es6模板字符串拼接,具体上代码。
var res_arr=result.data;//后台传过来的数据
res_arr.forEach(function (item) {
html +=`<div class="question">`;
html+=` ${item.id==5?`<div style="text-align:center;">第一部分:单选题</div>`:''}
${item.id==25?`<div style="text-align:center;">第二部分:多选题</div>`:''}`;
html+=` <h2>${item.sort}、${item.title}(${item.subject_type==0?'单选题':'多选题'})</h2>
<ul>`;
//判断是否选中
item.option.forEach(function (i) {
let isChecked=false;
for (let ii = 0,len=answer.length; ii < len; ii++) {
if(i.id === answer[ii]){
isChecked = true;
break;
}
}
html +=`<li>
<label>
${item.subject_type==0? `<input type="radio" name="${item.id}" value="${i.id}" ${isChecked?'checked':''} >` :
`<input type="checkbox" name="${item.id}" value="${i.id}" ${isChecked?'checked':''} >`}
<i class="spot"></i><span>${i.title}</span></label>
</li>`
})
html +=`</ul>
</div>`;
})
$("#question").append(html);