选择题选项随机排序的jquery实现

要求答题的A,B,C,D答案能够随机变化位置,也就是A,B,C,D答案内容每次刷新都应该是不同的。

实现前的html源代码:

1
2
3
4
5
6
< div  class = "col-md-12"  id = "datiOption" >
                     < p  class = "bigFont"  data-bind = "visible:Type()!='判断'" >< input  type = "checkbox"  name = "chk"  data-bind = "visible:Type()=='多选',value:Option1"  id = "sela"  />< span  class = "seloption" > span >< span  data-bind = "text:Option1" > span > p >
                     < p  class = "bigFont"  data-bind = "visible:Type()!='判断'" >< input  type = "checkbox"  name = "chk"  data-bind = "visible:Type()=='多选',value:Option2"  id = "selb"  />< span  class = "seloption" > span >< span  data-bind = "text:Option2" > span > p >
                     < p  class = "bigFont"  data-bind = "visible:Type()!='判断'" >< input  type = "checkbox"  name = "chk"  data-bind = "visible:Type()=='多选',value:Option3"  id = "selc"  />< span  class = "seloption" > span >< span  data-bind = "text:Option3" > span > p >
                     < p  class = "bigFont"  data-bind = "visible:Type()!='判断'" >< input  type = "checkbox"  name = "chk"  data-bind = "visible:Type()=='多选',value:Option4"  id = "seld"  />< span  class = "seloption" > span >< span  data-bind = "text:Option4" > span > p >
                 div >


实现效果所需的jquery代码:

在javascript的$(function(){

})中增加如下代码:

//选项随机排序
           $("#datiOption p").each(function(index) {
               if (parseInt(Math.random() * 2) == 0) {
                   $(this).prependTo($(this).parent());
               }	
           });
           //选项在随机排序后再根据新排序重新赋值A,B,C,D 
           $("#datiOption p").each(function (index) {
               if(index==0) {
                   $(".seloption").eq(0).text("A、");
               }
               else if (index == 1) {
                   $(".seloption").eq(1).text("B、");
               }
               else if (index == 2) {
                   $(".seloption").eq(2).text("C、");
               }
               else if (index == 3) {
                   $(".seloption").eq(3).text("D、");
               }
           });

其中第一部分代码实现了随机排序。

第二部分代码根据随机排序后的代码重新更新A,B,C,D的显示。因为A,B,C,D你是不能写死的,否则随机排序后,看到的就不是按照A,B,C,D顺序排列了



你可能感兴趣的:(jquery,javascript)