jQuery - 如何分离两个依赖于同一个对象的对象？ [英] jQuery - How to separate two objects which are dependent on same object?
问题描述
我正在尝试制作一个表单的通用版本，其中下拉列表将显示，具体取决于以前的下拉列表值，但有些下拉列表取决于两个或更多以前的答案。
I'm trying to make generic version of a form where dropdown would appear depending on previous dropdown value, but some dropdown is dependent on two or more previous answers.
我遇到的问题是有相同问题的问题，同样的答案，所以当我迭代JSON，它显示它们，同时第二个问题是假设只有当所有依赖答案都满足时才出现，所以我需要一种方法来分离它们。目前，ID 8和9的问题具有相同的依赖答案，但问题9还有一个依赖关系。
The problem I encountered is that got questions which are dependent on the same question with same answer, so when I iterate JSON, it shows them both, meanwhile second question is suppose to appear only when all dependent answers are fulfilled, so I need a way to separate them. Currently, questions with Id 8 and 9 have same dependent answers, but question 9 has one more dependency.
JSON看起来像这样：
JSON looks like this:
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函数：
And this is jQuery function:
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，但问题9只有当问题8被回答为是时才出现。无论我如何尝试，问题9就像问题8一样传递，因为它有相同的依赖答案。问题8中我选择了是之后，如何过滤问题9并显示？
With above code I get an array of 2 objects filled with question 8 and 9, but question 9 needs to appear only when question 8 is answered with value "yes". Whatever "if" I tried, question 9 passes just like question 8, because it has same dependent answers. How can I filter question 9 and show it only after I picked "yes" on question 8?
推荐答案
您当前的问题解决方案是，您正在检查问题阵列中当前选择的答案，如果您在任何问题中找到当前所选的答案在依赖答案列表中，那么您正在考虑该问题作为潜在的下一个问题，即使那个问题可能有不止一个的遗留问题，可能无法实现，但由于您没有维持任何状态，因此您无法检查它们。
The issue with your current solution is that you are checking the current selected answer in the array of questions, and if you find the current selected answer to be in the list of dependent answers in any question, then you are considering that question as the potential next question, even though that question may have more than one depedency which is may not be fulfilled but you can not check them since you are not maintaining any kind of state.
您可以做的一件事是创建一个hashmap，只需跟踪已经回答的问题，并在满足所有依赖性的情况下检查下一个潜在的问题查找。
One thing that you can do create a hashmap which simply keeps track of the questions which has been answered and while checking for next potential question lookup if all the dependcy is fulfilled.
所以你原来的功能正在每个选择的变化中被调用。
So your original function which I'm assuming is being called on each select change.
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
});
}
希望这有帮助。
这篇关于jQuery - 如何分离两个依赖于同一个对象的对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
