JavaScript 动态评分矩阵

Question

我需要一种在 JavaScript 中实现动态评分矩阵的方法。我在这里创建了一个 fiddle :

Sample Fiddle

关于您就读的学校的前两个问题显示/隐藏其他问题。

因此，根据前两个问题的答案，有 4 种可能的情况:

仅回答始终显示的问题 回答始终显示的问题以及高中问题 回答始终显示的问题以及小学问题 回答始终显示的问题以及小学和高中问题

为了动态循环需要回答的问题，我需要构建一系列可见的问题(不包括有关您就读哪所学校的问题)。

$(document).ready(function() {

  // INITALISE OPTIONAL QUESTION GROUPS HIDDEN
  $('.form-group.highschoolquestions').hide();
  $('.form-group.elementaryschoolquestions').hide();


  // SHOW/HIDE HIGH SCHOOL QUESTIONS
  $(document).on('change', '.selectpicker.highschool', function() {
console.log('high school changed');
if ($('.selectpicker.highschool').val() == 1) {
  $('.form-group.highschoolquestions').show();
}
if ($('.selectpicker.highschool').val() == 0) {
  $('.form-group.highschoolquestions').hide();
}
});

  // SHOW/HIDE ELEMENTARY SCHOOL QUESTIONS
  $(document).on('change', '.selectpicker.elementaryschool', function() {
    if ($('.selectpicker.elementaryschool').val() == 1) {
      $('.form-group.elementaryschoolquestions').show();
    }
if ($('.selectpicker.elementaryschool').val() == 0) {
  $('.form-group.elementaryschoolquestions').hide();
}

var questionsVisible = [];
$(document).on('change', '.selectpicker.schoolgroup', function() {
  // I WANT TO SCORE ONLY THE VISIBLE QUESTIONS - HOW TO CONSTRUCT AN ARRAY TO DO THIS?
  $('.selectpicker.highschoolquestion:visible').each(function() {
    questionsVisible.push(this);
    console.log('pause');
    });
  });
 });
});

Answer 1

这是可行的解决方案:

Fiddle

$(document).ready(function() {

  // INITALISE OPTIONAL QUESTION GROUPS HIDDEN
  $('.form-group.highschoolquestions').hide();
  $('.form-group.elementaryschoolquestions').hide();


  // SHOW/HIDE HIGH SCHOOL QUESTIONS
  $(document).on('change', '.selectpicker.highschool', function() {
    console.log('high school changed');
    if ($('.selectpicker.highschool').val() == 1) {
      $('.form-group.highschoolquestions').show();
    }
    if ($('.selectpicker.highschool').val() == 0) {
      $('.form-group.highschoolquestions').hide();
    }
  });

  // SHOW/HIDE ELEMENTARY SCHOOL QUESTIONS
  $(document).on('change', '.selectpicker.elementaryschool', function() {
    if ($('.selectpicker.elementaryschool').val() == 1) {
      $('.form-group.elementaryschoolquestions').show();
    }
    if ($('.selectpicker.elementaryschool').val() == 0) {
      $('.form-group.elementaryschoolquestions').hide();
    }

  });
      $(document).on('change', 'select', function() {
      // I WANT TO SCORE ONLY THE VISIBLE QUESTIONS - HOW TO CONSTRUCT AN ARRAY TO DO THIS?
      var total = 0;
      $('.score-select select:visible').each(function() {
       var val = parseInt($(this).val())
        total += val > 0 ? val :0;
        console.log('pause');
      });
      $('#todayscore').val(total);
    });
});