自动切换下一题

来源：互联网发布：java字节流写入文件编辑：程序博客网时间：2024/06/15 09:30

题记：依然是量表系统工程，答题的过程中除了点击下一题来进入下一题外，还可以在选完选项后自动跳入下一题。代码如下：

     //自动切换下一题    function nextAjax(){        var num = $(".question_number").text();        //alert(num);        //return;        var formid = $(".question_form").attr("nameid");        var hidPatientid = $('.hidPatientid').text();        //return;        var tag = false;        var optionVal;        optionVal = $("input[name='option']:checked").attr('value');        $.ajax({                url:"/formpreview/getNext",                type:"POST",                dataType:"json",                data:{                    "DATA": {"FORMID":formid,"NUM":num,"optionVal":optionVal,"hidPatientid":hidPatientid}                },                success: function(data){                    if(data.flag){                        $(".question_number").text(data.num+".");                        $("#question_content").text(data.data.question);                        $("#li_optiona").empty();                        $("#li_optiona").append('<input name="option" id="optionA" type="radio" value="1"><label for="optionA">  A. <span id="span_optiona"></span></label>');                        $("#span_optiona").text(data.data.optionA);                        $("#li_optionb").empty();                        $("#li_optionb").append('<input name="option" id="optionB" type="radio" value="2"><label for="optionB">  B. <span id="span_optionb"></span></label>');                        $("#span_optionb").text(data.data.optionB);                        $("#li_optionc").empty();                        if(data.data.optionC != ""){                            $("#li_optionc").append('<input name="option" id="optionC" type="radio" value="3"><label for="optionC">  C. <span id="span_optionc"></span></label>');                            $("#span_optionc").text(data.data.optionC);                        }                        $("#li_optiond").empty();                        if(data.data.optionD != ""){                            $("#li_optiond").append('<input name="option" id="optionD" type="radio" value="4"><label for="optionD">  D. <span id="span_optiond"></span></label>');                            $("#span_optiond").text(data.data.optionD);                        }                        $("#li_optione").empty();                        if(data.data.optionE != ""){                            $("#li_optione").append('<input name="option" id="optionE" type="radio" value="5"><label for="optionE">  E. <span id="span_optione"></span></label>');                            $("#span_optione").text(data.data.optionE);                        }                        $("#li_optionf").empty();                        if(data.data.optionF != ""){                            $("#li_optionf").append('<input name="option" id="optionF" type="radio" value="6"><label for="optionF">  F. <span id="span_optionf"></span></label>');                            $("#span_optionf").text(data.data.optionF);                        }                        $("#li_optiong").empty();                        if(data.data.optionG != ""){                            $("#li_optiong").append('<input name="option" id="optionG" type="radio" value="7"><label for="optionG">  G. <span id="span_optiong"></span></label>');                            $("#span_optiong").text(data.data.optionE);                        }                        $('input[value='+data.data.answers+']').attr("checked",true);                        $('audio').attr('src','../../public/audio/'+data.data.formid+data.num+'.mp3');                    }                    else{                        $('.main_cover,.finish').css("display","block");                        // if(value=='true'){                            $('audio').attr('src','../../public/audio/end.mp3');                        // }                        $('.finish_cont .next').click(function(){                            window.close();                        });                        tag = true;                        $.ajax({                            url:"/formpreview/end",                            type:"POST",                            dataType:"json",                            data:{                                "DATA": {"TAG":tag,"FORMID":formid,"hidPatientid":hidPatientid}                            },                            success: function(data){                            }                        });                    }                }              });    }    var option = $("input[name='option']");    option.live('change',function(){        setTimeout(nextAjax,250);    });

这里着重说一下live绑定事件，项目开始时以为给option绑定change事件就会给每个option绑定change事件，事实当然不是，只执行一次，如果需要多次执行，就得使用事件委托。

与bind()不同的是，live()一次只能绑定一个事件。
这个方法跟传统的bind很像，区别在于用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。比如说，如果你给页面上所有的li用live绑定了click事件。那么当在以后增加一个li到这个页面时，对于这个新增加的li，其click事件依然可用。而无需重新给这种新增加的元素绑定事件。

1 0