本文主要是通过jq获取每个题的答案。所使用的前端框架是 flask后台的 bootstrap框架。
具体代码如下,数据自后台传到前端页面:
{% extends "base.html" %} {% import "bootstrap/wtf.html" as wtf %} {% block title %}微信考试系统{% endblock %} {% block page_content %} {% for i in x[2:-1] %} <div class="post-body"> <div> {{ i.split('|')[0] }} 分数{{ i.split('|')[1] }} </div> <button type="button" class="btn btn-default" >A:{{ i.split('|')[3] }}</button> <button type="button" class="btn btn-default">B:{{ i.split('|')[4] }}</button> <button type="button" class="btn btn-default">C:{{ i.split('|')[5] }}</button> <button type="button" class="btn btn-default">D:{{ i.split('|')[6] }}</button> </div> {% endfor %} <button type="button" id="result" >点击这里</button> <script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script> <script> <!--以下为选择答案后,答案变红色--> $(document).ready(function(){ $("button.btn-default").click(function(){ if(this.style.backgroundColor == 'red'){ this.style.backgroundColor = '#fff'; }else{ this.style.backgroundColor = 'red'; } }); }); <!--以下为遍历选择题答案--> $(document).ready(function(){ var txt="" var x=1 $("#result").click(function(){ $("div.post-body").each( function(){ $(this).children().each(function(){ if(this.style.backgroundColor == 'red'){ txt = txt + $(this).text()[0] ;} else{txt = txt ;} }) txt = txt + '&' } ) <!--alert( txt );--> }); }); </script> {% endblock %}以下则为运行结果: