最近遇到一个项目,做一个小的答题功能 需求如下:
请求的返回的数据是一个字符串: 这个字符串中用分号分隔题目.
每一个题目中使用 | 分隔题干 与 答案选项. 以及正确答案.
(注 此处以 responseText 来模拟已经从服务器返回答题数据)
解决方案如下:
<div id="dv"></div> <script> var responseText = '吃冰淇淋不解渴主要是因为它: |含蛋白质|含脂肪|含糖|含有机物|2;下列哪项是人体的造血器官: |心脏|骨髓|肾脏|肌肉|1'; var questions = []; responseText.split(';').forEach(function(question){ var tempArray = question.split('|'); //第0个是问题 最后一个是打印 中间的是选项 var item = {}; // 删除数组中的第一个值 并且获取返回的被删除的值 item.title = tempArray.shift(); //删除数组中的最后一个值 并且获取返回的被删除的值 item.answer = tempArray.pop(); //数组中剩下的数据就只剩下选项 item.options = tempArray; //将对象item 添加到 数组 questions中 questions.push(item); }) //封装一个工具集 var utils = { getId:function (id) { return document.getElementById(id); }, create:function (tagName) { return document.createElement(tagName); }, textNode:function (txt) { return document.createTextNode(txt); } } //思路 生成 p>ul>li*4 var dv = utils.getId('dv'); var optiontitle = 'a),b),c),d)'.split(','); questions.forEach(function(item,i){ var itemContainer = utils.create('div'); //创建一个 p 标签 var pTitle = utils.create('p'); //将标题数据 添加到p标签中 pTitle.appendChild(utils.textNode((i+1)+'. '+item.title)); //将p标签 追加到div中 itemContainer.appendChild(pTitle); //创建一个 ul 标签 var ulOptions = utils.create('ul'); item.options.forEach(function(option,index){ var li = utils.create('li'); li.appendChild(utils.textNode(optiontitle[index]+option)); li.onclick = option_click; if(item.answer == index){ li.setAttribute('data-isAnswer','true'); } ulOptions.appendChild(li); }); itemContainer.appendChild(ulOptions); dv.appendChild(itemContainer); }) function option_click() { var container = this.parentNode.parentNode; if(this.getAttribute('data-isAnswer')){ //正确 container.setAttribute('style','border:3px solid green'); }else{ container.setAttribute('style','border:3px solid red'); } } </script>

我的微信
爱生活、爱学习的小伙伴可以通过扫一扫二维码添加我的个人微信一起交流!
您可以选择一种方式赞助本站
支付宝扫一扫赞助
微信钱包扫描赞助
赏