Вопросы опроса должны отображаться и скрываться на основе родительского ответа

Question

Я создал это https://jsfiddle.net/jorden15/9yz45bz8/, чтобы показать вам, что происходит. В основном у меня есть Survey Builder, который создает 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'); 
    } 
    }); 
});