首页 > 这2天在用jquery写答题提交功能,出现问题

这2天在用jquery写答题提交功能,出现问题

选择答题的要求是:选择一道题后,出现下一道题,但是出现的下一道题可能跟前面的题目有关联,如果不满足要求,那么或许跳过下道题,显示下道题的下道题。但是在做第五题跟第六题出现一个问题。
需求是如图 :

(本意是第五题有6个小题,第六题也有6个小题,当选择第五题的小题中radio值为1或2的时候,就会显示第六题对应的题号;)我的代码是:

var showQuestion = function(questionId){
  $("*[question='"+questionId+"']").show();
  $("*[id='q"+questionId+"_tit']").show();
}
var hideQuestion = function(questionId){
    $("*[question='"+questionId+"']").hide();
    $("*[id='q"+questionId+"_tit']").hide();
}
var getQuestionValue = function(questionId){
    var question=$("[question='"+questionId+"']");
    return $(":radio:checked",question).val();

}
var init = function(){
    $("dd[id]").each(function(index,item){
      quesId = $(this).attr("id").replace("q","");
      $(this).attr("question",quesId);
    });

}

$(document).ready(function(){
  init();
  $("*[question]").hide();
  $("*[id*=_tit]").hide();
  $("*[question]").click(updateAllquestions);
   updateAllquestions();
});

function updateAllquestions(){
    console.log("update start ......");
    var question1=$("[question='1']");
    var question5=$("[question='5']");
    var question6=$("[question='6']");
    var question1_val = getQuestionValue(1);

    //question 1
    showQuestion(1);
    showQuestion(2);
    showQuestion(3);
    showQuestion(4);
    showQuestion(5);

    //question6

    var checkedNum = $(":radio:checked",question5).length;  
    var showQ6condition = $(":radio:checked[value!='3']",question5).length;

    if (showQ6condition > 0){
      showQuestion(6);
          $(":radio:checked",question5).each(function(){
           var trIndex = $("tr",question5).index($(this).parents("tr"));           
           if ($(this).val() == "3"){
              $("tr",question6).eq(trIndex).hide();
           }else{
              $("tr",question6).eq(trIndex).show();
           }

        })   
    }else{
      hideQuestion(6);
    }

    showQuestion(7);
    showQuestion("7_1");

    console.log(question1_val);
    if (isEmpolyee()){
        showQuestion(8);
        showQuestion(20);
    }else{
        hideQuestion(8);
        hideQuestion(20);
    }

    showQuestion(9);
    showQuestion("9_1");

    //question10
    var question9_val = getQuestionValue(9);
    var question9_1_val = getQuestionValue("9_1");

    console.log(question9_val);
    console.log(question9_1_val)
    if (isOneOrTwo(question9_val) || isOneOrTwo(question9_1_val) ){
        showQuestion(10);
    }else{
        hideQuestion(10);
    }

   if (isEmpolyee()){
      showQuestion(11);
      showQuestion(12);
      showQuestion(14);
   }else{
      hideQuestion(11);
      hideQuestion(12);
      showQuestion(14);
   }

   var question12_val = getQuestionValue(12);
   if (isOneOrTwo(question12_val)){
     showQuestion(13);
   }else{
      hideQuestion(13);
   }

   var question14_val = getQuestionValue(14);
   if (question14_val != undefined && (question14_val == 1 || question14_val == 2 || question14_val == 3)){
       showQuestion(15);
       showQuestion(16);
       showQuestion(17);
   }else{
       hideQuestion(15);
       hideQuestion(16);
       hideQuestion(17);
   }


   if (
      isEmpolyee()
      && (question14_val != undefined && (question14_val == 1 || question14_val == 2 || question14_val == 3))
    ){
     showQuestion(18);
     showQuestion(19);
   }else{
     hideQuestion(18);
     hideQuestion(19);
   }

   if(
       (question1_val != undefined && question1_val == 1 )
       &&  showQ6condition.length > 0
    ){
     showQuestion(21);
   }else{
     hideQuestion(21);
   }

   showQuestion(22);
   showQuestion(23);
   showQuestion(24);

   if (isEmpolyee()){
     showQuestion(25);
   }else{
     hideQuestion(25);
   }
   showQuestion(26);
   showQuestion(27);
   showQuestion(28);


}

function isOneOrTwo(value){
    return value != undefined && (value == 1 || value == 2);

}
function isEmpolyee(){
     var question1_val = getQuestionValue(1);
     return  (question1_val != undefined && (question1_val == 2 || question1_val == 3));
}   

五六题弄昏了 感觉写的条件都那么的问题,谁指导下


过分依赖了js,就不够语义化了,可移植性也很差。

我建议你使用AngularJS,这样就会好看很多。例如选中某个checkbox后,会出现其它选项,HTML大概可以这样写:

<div id="q5">
    <input id="q5s1" type="checkbox" value="1" ng-model="q5s1Answered"/>
</div>
<div id="q6">
    <div id="q6s1" ng-show="q5s1Answered">
        <input type="checkbox" value="1"/>
    </div>
</div>
【热门文章】
【热门文章】