每个循环之后的jQuery

时间:2018-01-23 16:04:37

标签: javascript jquery loops each .when

我有六个静态html问题,然后由JSON根据之前在页面上做出的表单选择动态生成3-4个问题。我要做的是生成问题,然后根据创建的最终问题数创建进度条。我遇到麻烦的地方是在我的每个循环之后使用jQuery完成方法。它在第一次迭代后而不是最后一次迭代时触发。我已经尝试填充数组“Qs”并在阅读其他帖子后传递数组,但我所做的还没有奏效。我真的想分割我的代码并尽可能地清理它,所以我试图远离嵌套它。

  var Qs = [];
  var generateQs = function (){
    var $dept = sessionStorage.getItem("sFGeneralDepartment1");
    var $qWrapper = $("#assessmentTool");
      $.getJSON("js/dept-questions.json", function(data) {
        var key = $dept;
        var vals = [];
        switch(key) {
          case 'Information technology':
            vals = data.IT;
            break;
          case 'Finance':
            vals = data.FIN;
            break;
          case 'Human resources':
            vals = data.HR;
            break;
          case 'Marketing':
            vals = data.MKT;
            break;
          default:
            vals = data.OT;
          break;
         }
         $.each(vals, function(index, value) {
           var $cleanID = (value.qID).replace(/q/g, '');
           $qWrapper.append('<div class="question-container rangeIcon disabled" id="' + value.qID + '"><p>Question ' + $cleanID +'</p> <h4>' + value.questionText + '</h4><ul class="answer-container"></ul></div>');
           $.each(value.answers, function(i, answer) {
             var $aID = answer.aID;
             var $radioBtn = '<div class="radioBtn"><span class="radioBtnInner"></span></div>';
             $('.question-container#' + value.qID + ' .answer-container').append('<li class="survey-item"><div class="icon-holder" id="' + $aID + '"><img src="img/' + answer.iconFileName + '" width="' + answer.iconWidth +'" height="'+ answer.iconHeight + '"/></div><input type="radio" id="'+ $aID + '" value="' + answer.pointValue + '"><label for="' + $aID + '" class="radio" data-popover="'+ answer.popoverText + '">' + $radioBtn + '<span class="labelTopText">' + answer.labelTopText + '<span class="divider">/</span></span><span class="labelBottomText">' + answer.labelBottomText + '</span></label></li>');
           });
           Qs.push($cleanID);
         });
         console.log('done');
         console.log(Qs);
       });
     };
     $.when(generateQs($,Qs)).done(function() {
       //create progress bar
       console.log('starting');
       var qCount = ($('.question-container').length + 1);
       var qList = $('#progressBar');
       for (var i = 0; i < qCount; i++){
         qList.append('<li class="progress-bar-steps" data-item="q' + (i+1) + '">' + '<span class="step-text">' + (i+1) + '</span>' + '</li>');
           $('.question-container').each(function (i, value){
             var qId = $(this).attr('id');
             if ($(this).hasClass("active")) {
                 $(this).css('opacity','1.0');
                 $('#progressBar').find("[data-item='" + qId + "']").addClass('active').html('<span class="step-text">' + (i+1) + '</span>');
                 $('.progress-bar-steps.active').next('.progress-bar-steps').addClass('next disabled-next').html('<span class="step-text">' + (i+2) + '</span>');
             } else {
               $(this).addClass('disabled');
             }
           });
         }
      });

0 个答案:

没有答案