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

我正在尝试创建一个表单的通用版本，其中下拉列表将根据以前的下拉列表值显示，但某些下拉列表取决于以前的两个或多个答案

我遇到的问题是，这些问题依赖于相同的问题和相同的答案，所以当我迭代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的回答值为“是”时，问题9才需要出现。无论我尝试了什么“如果”，问题9都会像问题8一样通过，因为它有相同的依赖答案。如何筛选问题9并在我对问题8选择“是”后才显示它？

这是一种方法，其中您有一系列已回答的问题，以便跟踪哪些潜在问题可以有效显示。我相信您可以对此进行优化，但这一部分将以一种相当简单的方式展示如何进行优化。希望这有帮助

let selectedValue = 'female';
// Push selectedValue into some array to keep track of current answers
let selectedValues = [
  {QuestionId: 1, answer: 'q1'},
  {QuestionId: 2, answer: 'q2'},
  {QuestionId: 3, answer: 'q3'},
  {QuestionId: 4, answer: 'q4'},
  {QuestionId: 5, answer: 'q5'},
  {QuestionId: 6, answer: 'female'}
];

let resultingQuestions = [];

questions.filter((q) => {
  return q.DependantAnswers.find((dp) => { 
    return dp.answer === selectedValue;
  });
}).filter((pq) => {
  let validQuestion;
  pq.DependantAnswers.forEach((da) => {
    validQuestion = selectedValues.find((sv) => {
      return sv.QuestionId === da.QuestionId && sv.answer === da.answer;
    }); 
  });

  if (validQuestion) {
    resultingQuestions.push(pq);
  }
});

---

这是一种方法，你有一系列已经回答的问题，这样你就可以跟踪哪些潜在的问题是有效的。我相信您可以对此进行优化，但这一部分将以一种相当简单的方式展示如何进行优化。希望这有帮助

let selectedValue = 'female';
// Push selectedValue into some array to keep track of current answers
let selectedValues = [
  {QuestionId: 1, answer: 'q1'},
  {QuestionId: 2, answer: 'q2'},
  {QuestionId: 3, answer: 'q3'},
  {QuestionId: 4, answer: 'q4'},
  {QuestionId: 5, answer: 'q5'},
  {QuestionId: 6, answer: 'female'}
];

let resultingQuestions = [];

questions.filter((q) => {
  return q.DependantAnswers.find((dp) => { 
    return dp.answer === selectedValue;
  });
}).filter((pq) => {
  let validQuestion;
  pq.DependantAnswers.forEach((da) => {
    validQuestion = selectedValues.find((sv) => {
      return sv.QuestionId === da.QuestionId && sv.answer === da.answer;
    }); 
  });

  if (validQuestion) {
    resultingQuestions.push(pq);
  }
});

---

当前解决方案的问题在于，您正在检查问题数组中当前选定的答案，如果您发现当前选定的答案在任何问题的从属答案列表中，则您将该问题视为潜在的下一个问题，即使该问题可能有多个依赖关系，但可能无法满足，但您无法检查它们，因为您没有保持任何类型的状态

您可以做的一件事是创建一个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

    });

} 

---

希望这有帮助。

当前解决方案的问题是，您正在检查问题数组中当前选定的答案，如果您发现当前选定的答案在任何问题的从属答案列表中，则您将该问题视为下一个潜在问题，即使该问题可能有多个依赖关系，但可能无法满足，但您无法检查它们，因为您没有保持任何类型的状态

let selectedValue = 'female';
// Push selectedValue into some array to keep track of current answers
let selectedValues = [
  {QuestionId: 1, answer: 'q1'},
  {QuestionId: 2, answer: 'q2'},
  {QuestionId: 3, answer: 'q3'},
  {QuestionId: 4, answer: 'q4'},
  {QuestionId: 5, answer: 'q5'},
  {QuestionId: 6, answer: 'female'}
];

let resultingQuestions = [];

questions.filter((q) => {
  return q.DependantAnswers.find((dp) => { 
    return dp.answer === selectedValue;
  });
}).filter((pq) => {
  let validQuestion;
  pq.DependantAnswers.forEach((da) => {
    validQuestion = selectedValues.find((sv) => {
      return sv.QuestionId === da.QuestionId && sv.answer === da.answer;
    }); 
  });

  if (validQuestion) {
    resultingQuestions.push(pq);
  }
});

您可以做的一件事是创建一个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

    });

} 

希望这有帮助

let selectedValue = 'female';
// Push selectedValue into some array to keep track of current answers
let selectedValues = [
  {QuestionId: 1, answer: 'q1'},
  {QuestionId: 2, answer: 'q2'},
  {QuestionId: 3, answer: 'q3'},
  {QuestionId: 4, answer: 'q4'},
  {QuestionId: 5, answer: 'q5'},
  {QuestionId: 6, answer: 'female'}
];

let resultingQuestions = [];

questions.filter((q) => {
  return q.DependantAnswers.find((dp) => { 
    return dp.answer === selectedValue;
  });
}).filter((pq) => {
  let validQuestion;
  pq.DependantAnswers.forEach((da) => {
    validQuestion = selectedValues.find((sv) => {
      return sv.QuestionId === da.QuestionId && sv.answer === da.answer;
    }); 
  });

  if (validQuestion) {
    resultingQuestions.push(pq);
  }
});