Question

我创建了这个https://jsfiddle.net/jorden15/9yz45bz8/来向您展示正在发生的事情。基本上我有一个调查构建器，它为这个调查创建了html，我正在处理的功能是根据父母的答案隐藏和显示子问题。

例如，如果您在第一个问题上选择“是”，则子问题应该拉出来。我的问题是，有四个问题很深，如果我在任何时候选择否，它会显示最后一个问题。最后一个问题应该在“否”上触发，但仅由于其父级而没有其他内容。

我认为这个问题与我的show变量有关。由于单选按钮将不确定，但我不知道该怎么做。

$(function(){
  $('body').on('change', '.parent_question select, .parent_question input', function(){
    var child_input = $('[name="' + $(this).data('child-name') + '"]');
    var child_question = child_input.closest('.survey_answers');
    var trigger_on = $(this).data('trigger-on');
    var show = $(this)[0].selectedIndex == undefined ? ($(this).closest('.survey_answers').find('input').index($(this)) + 1) == trigger_on : $(this)[0].selectedIndex == trigger_on;
    console.log(show);
    if (show) {
      child_question.show();
    } else {
      child_question.hide();
      if (child_input.val() != '' || child_input.is(':checked')) {
        child_input.val('');
        child_input.attr('checked', false);
        child_input.trigger('change');
      }
  }
  });
});

Answer 1

这解决了这个问题。问题是，如果答案发生了变化，我试图隐藏问题，但我只是向后做，而且不喜欢这样。

$(function(){
  $('body').on('change', '.parent_question select, .parent_question input', function(){
    var child_input = $('[name="' + $(this).data('child-name') + '"]');
    var child_question = child_input.closest('.survey_answers');
    var trigger_on = $(this).data('trigger-on');
    var show = $(this)[0].selectedIndex == undefined ? ($(this).closest('.survey_answers').find('input').index($(this)) + 1) == trigger_on : $(this)[0].selectedIndex == trigger_on;
    console.log(show);
    if (show && (child_input.val() != '' || child_input.is(':checked'))) {
      child_question.show();
    } else {
      child_question.hide();
      child_input.val('');
      child_input.attr('checked', false);
      child_input.trigger('change');
  }
  });
});

调查问题需要根据父母的答案显示和隐藏

1 个答案: