jQuery - 如何分離依賴於同一對象的兩個對象？

Question

我試圖製作一個通用版本的窗體，其中顯示的下拉菜單取決於之前的下拉值，但某些下拉菜單依賴於兩個或更多以前的答案。

我遇到的問題是，依賴於相同問題的問題具有相同的答案，所以當我迭代JSON時，它將兩者都顯示出來，同時第二個問題假設只在所有依賴答案滿足時出現，所以我需要一種方法來分開它們。目前，Id 8和Id 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的回答值爲「是」時纔出現。無論我嘗試什麼「如果」，問題9都會像問題8一樣傳遞，因爲它具有相同的相關答案。我如何過濾問題9並僅在問題8選擇「是」之後才顯示它？

Answer 1

與當前解決方案的問題是，你正在檢查的問題，陣列中的當前選擇的答案，如果你發現當前選中的答案，是依賴於答案的列表中有任何問題，那麼你正在考慮將這個問題作爲潛在的下一個問題，儘管這個問題可能有不止一個依賴，這個依賴可能無法實現，但由於你沒有維護任何一種狀態，所以你不能檢查它們。

一件事，你可以做創建一個HashMap它只是保持對已經回答了問題，並同時如果所有的dependcy滿足爲下一個潛在的問題查找檢查軌道。

所以你原來的功能，我假設被稱爲每個選擇的變化。

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