jq 实现遍历功能

本文主要是通过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 %}

以下则为运行结果：