javascript - jQuery - 如何分离依赖于同一对象的两个对象？

Question

我正在尝试制作表单的通用版本，其中下拉列表将根据先前的下拉值出现，但某些下拉列表取决于两个或多个先前的答案。

我遇到的问题是，得到的问题依赖于具有相同答案的同一问题，因此当我迭代 JSON 时，它会同时显示它们，同时第二个问题应该仅在满足所有相关答案时才会出现，所以我需要一种方法将它们分开。目前，ID 8 和 9 的问题具有相同的依赖答案，但问题 9 多了一个依赖答案。

JSON 看起来像这样:

var questions = [
         //questions before these  
        {

            Id: 6,
            ProductGroups: [{
                    ProductGroupId: 1,
                    show: false
                },
                {
                    ProductGroupId: 2,
                    show: true
                }
            ],
            //dependant answer(s)
            DependantAnswers: [{
                QuestionId: 1,
                answer: ""
            }]
        },
        {

            Id: 7, //guid
            ProductGroups: [{
                    ProductGroupId: 1,
                    show: false
                },
                {
                    ProductGroupId: 2,
                    show: false
                }
            ],
            //dependant answer(s)
            DependantAnswers: [{
                QuestionId: 6,
                answer: "male"
            }]
        },
        {

            Id: 8, //guid
            ProductGroups: [{
                    ProductGroupId: 1,
                    show: false
                },
                {
                    ProductGroupId: 2,
                    show: false
                }
            ],
            //dependant answer(s)
            DependantAnswers: [{
                QuestionId: 6,
                answer: "female"
            }
            ]
        },
        {

            Id: 9, //guid
            ProductGroups: [{
                    ProductGroupId: 1,
                    show: false
                },
                {
                    ProductGroupId: 2,
                    show: false
                }
            ],
            //dependant answer(s)
            DependantAnswers: [{
                    QuestionId: 6,
                    answer: "female"
                },
                {
                    QuestionId: 8,
                    answer: "yes"
                }
            ]
        }

    ];

这是 jQuery 函数:

function onQuestionSelectChange() {
        $("#questionsContainer div select").change(function () {

            var selectedValue = $(this).val();
            var selectedQuestion = $(this).parent().attr('id').split('-');
            var selectedQuestionId = selectedQuestion[1];

            var potentialQuestions = [];
            //var filteredQuestions = [];


            $.each(questions, function(index, element) {
                $.each(element.DependantAnswers, function (indexDepAnswer, elemDepAnswer){
                    if(elemDepAnswer.answer == selectedValue)
                        potentialQuestions.push(element);

                });

            });
            //here I need to separate question 8 from 9 and show only question 8

        });

    }

通过上面的代码，我得到了一个由 2 个对象组成的数组，其中包含问题 8 和 9，但只有当问题 8 的答案为"is"时，问题 9 才需要出现。无论我尝试“如果”，问题 9 都会像问题 8 一样通过，因为它具有相同的相关答案。如何过滤问题 9 并仅在问题 8 中选择"is"后才显示？

Answer 1

当前解决方案的问题在于，您正在检查问题数组中当前选定的答案，如果您发现当前选定的答案位于任何问题的相关答案列表中，那么您正在考虑该问题作为潜在的下一个问题，即使该问题可能有多个可能无法满足的依赖关系，但您无法检查它们，因为您没有维护任何类型的状态。

您可以做的一件事是创建一个 HashMap ，它可以简单地跟踪已回答的问题，并在检查下一个潜在问题查找是否满足所有依赖项时进行。

因此，我假设在每次选择更改时都会调用您的原始函数。

var questionsCompleted = Object.create(null);

function onQuestionSelectChange() {
    $("#questionsContainer div select").change(function() {

        var selectedValue = $(this).val();
        var selectedQuestion = $(this).parent().attr('id').split('-');
        var selectedQuestionId = selectedQuestion[1];

        var potentialQuestions = [];
        //var filteredQuestions = [];

        // Update the Hashmap 
        questionsCompleted[selectedQuestionId] = selectedValue;

        // Check all the questions for the next potential question. The next potential question will be the one whose all dependent question are already answered
        $.each(questions, function(index, element) {
            var fulfilled = 0;
            $.each(element.DependantAnswers, function(indexDepAnswer, elemDepAnswer) {
                if (elemDepAnswer.answer === questionsCompleted[element.Id])
                    fulfilled++;

            });
            if (fulfilled === element.DependantAnswers.length) // All dependency fulfilled
                potentialQuestions.push(element);

        });
        //here I need to separate question 8 from 9 and show only question 8

    });

} 

希望这有帮助。