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 }); } 

使用上面的代码，我得到一个由问题8和9填充的2个对象的数组，但问题9只有在问题8的回答值为“是”时才需要出现。 无论我尝试过什么“if”，问题9就像问题8一样传递，因为它具有相同的依赖性答案。 如何在问题8中选择“是”之后才能过滤问题9并显示它？

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 }); } 

希望这可以帮助。

Answer 2

这是一种方法，您可以在其中获得一系列已经回答的问题，以便您可以跟踪哪些有效的问题可以显示。 我相信你可以优化它，但是这个是以一种相当简单的方式展示如何做到这一点。 希望这可以帮助。

 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); } });