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

时间:2017-03-22 17:20:31

标签: javascript jquery json dependencies

我尝试制作表单的通用版本,其中下拉列表会根据之前的下拉值显示,但某些下拉列表取决于之前的两个或多个答案。

我遇到的问题是得到的问题依赖于同一个问题和相同的答案,所以当我迭代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用值#34;是"回答时才需要出现。无论如何" if"我试过,问题9传递就像问题8,因为它有相同的依赖答案。我怎样才能过滤问题9并在我选择"是"问题8?

2 个答案:

答案 0 :(得分:0)

这是一种方法,您可以在其中找到已回答问题的数组,以便您可以跟踪哪些有效的问题可以显示。我相信你可以对此进行优化,但这个是以一种相当简单的方式展示如何做到这一点。希望这会有所帮助。

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

答案 1 :(得分:0)

您当前解决方案的问题在于您正在检查问题数组中当前选定的答案,如果您在任何问题中找到当前所选答案都在相关答案列表中,那么您正在考虑该问题作为潜在的下一个问题,即使这个问题可能有多个依赖,但可能无法实现,但由于你没有维持任何一种状态,你无法检查它们。

您可以做的一件事就是创建一个hashmap,它只是跟踪已经回答的问题,并在检查完所有依赖性时检查下一个潜在的问题查找。

因此,我假设的每个选择更改都会调用您原来的函数。

Schedule

希望这有帮助。