jquery形式 - 存儲在陣列中的答案

Question

我正在提出一個表單/提問者，會問用戶幾個問題。在這個例子中，第一個問題將用戶分成兩組，即卡車或汽車。然後詢問他們關於車輛的一些問題，最後只顯示他們說是的好處。

的jsfiddle：http://jsfiddle.net/txwbowzy/3/

那我遇到的麻煩？在JsFiddle中，您將看到每個主題，汽車和卡車的JS。我需要每個主題都有一個包含問題的數組，以及一個數組來收集答案。在問題結束時，它將讀取答案數組，並只顯示他們說是的問題。如果你真的測試它，你會看到它顯示了H2默認文本，但不知何故，我需要它顯示數組中的第一個鍵（汽車問題1，而不是「隱藏」）。

$('#q1').show(); 

var qq = 0; 

$('#q1 input:radio').change(function() { 
var ans = $('input[name="genius"]:checked').val(); 

$('.q-block').fadeOut(500); 
if (ans == 'q1-y'){ 
    $('#ecQuestions').fadeIn(500); 
} 
if (ans == 'q1-n'){ 
    $('#lgQuestions').fadeIn(500); 
} 
}); 
//car 
$('#lgQuestions input:radio').change(function() { 

var ansLg = $('#lgQuestions input[name="genius"]:checked').val(); 
var lgQuestions = ["Car Question 1", "Car Question 2", "Car Question 3"]; 
var lgAnswers = new Array(5); 
var activeLg = document.getElementById('activeLg'); 

if (qq<lgQuestions.length) { 
    activeLg.innerHTML = lgQuestions[qq]; 
    qq++; 
    $('#lgQuestions input:radio').prop("checked", false); 
} 
else { 
    $('.q-block').fadeOut(500); 
    $('#solution').fadeIn(500); 
    document.getElementById('benefit').innerHTML = "Car benefits"; 
} 

}); 
//truck 
$('#ecQuestions input:radio').change(function() { 

var ansEc = $('#ecQuestions input[name="genius"]:checked').val(); 
var ecQuestions = ["Truck Question 1", "Truck Question 2", "Truck Question 3"]; 
var ecAnswers = new Array(5); 
var activeEc = document.getElementById('activeEc'); 

if (qq<ecQuestions.length) { 
    activeEc.innerHTML = ecQuestions[qq]; 
    qq++; 
    $('#ecQuestions input:radio').prop("checked", false); 
} 
else { 
    $('.q-block').fadeOut(500); 
    $('#solution').fadeIn(500); 
    document.getElementById('benefit').innerHTML = "Truck benefits"; 
} 

}); 

$('#q-contain input:radio').addClass('input_hidden'); 

$('#q-contain label').click(function() { 
$(this).addClass('selected').siblings().removeClass('selected'); 

}); 

Answer 1

我不知道，我希望我能理解你的問題。問題在於你的lgQuestions和ecQuestions單選按鈕的變更事件的功能需要在你的q1變更事件的函數中調用。我相信這個修改過的小提琴有你想要的行爲。

更新：要顯示回答'是'的問題，可以隨時將它們添加到顯示列表中。爲ul元素指定一個id並將項目留空（您可以在小提琴中看到它）。然後爲每個yes回答創建一個新的li項目並將其附加到ul元素。更新後的代碼如下。

http://jsfiddle.net/skizer/uuy06yf7/

$('#q1').show(); 

var qq = 0; 

$('#q1 input:radio').change(function() { 
    var ans = $('input[name="genius"]:checked').val(); 

    $('.q-block').fadeOut(500); 
    if (ans == 'q1-y'){ 
     $('#ecQuestions').fadeIn(500); 
     truckQuestionChange(); 
    } 
    if (ans == 'q1-n'){ 
     $('#lgQuestions').fadeIn(500); 
     carQuestionChange(); 
    } 
}); 
//car 

function carQuestionChange() { 
    var ansLg = $('#lgQuestions input[name="genius"]:checked').val(), 
     lgQuestions = ["Car Question 1", "Car Question 2", "Car Question 3"],  
     activeLg = document.getElementById('activeLg'), 
     liElement; 

    if(ansLg && ansLg === "lg-y") 
    { 
     liElement = document.createElement("li"); 
     liElement.innerHTML = lgQuestions[qq - 1]; 
     $("#benefitsList").append(liElement);  
    } 

    if (qq<lgQuestions.length) {  
     activeLg.innerHTML = lgQuestions[qq]; 
     qq++; 
     $('#lgQuestions input:radio').prop("checked", false); 
    } 
    else { 
     $('.q-block').fadeOut(500); 
     $('#solution').fadeIn(500); 
     document.getElementById('benefit').innerHTML = "Car benefits"; 
    } 
} 

function truckQuestionChange() { 
    var ansEc = $('#ecQuestions input[name="genius"]:checked').val(), 
     ecQuestions = ["Truck Question 1", "Truck Question 2", "Truck Question 3"], 
     activeEc = document.getElementById('activeEc'); 

    if(ansEc && ansEc === "ec-y") 
    { 
     liElement = document.createElement("li"); 
     liElement.innerHTML = ecQuestions[qq - 1]; 
     $("#benefitsList").append(liElement); 
    } 

    if (qq<ecQuestions.length) { 
     activeEc.innerHTML = ecQuestions[qq]; 
     qq++; 
     $('#ecQuestions input:radio').prop("checked", false); 
    } 
    else { 
     $('.q-block').fadeOut(500); 
     $('#solution').fadeIn(500); 
     document.getElementById('benefit').innerHTML = "Truck benefits"; 
    } 
} 

$('#lgQuestions input:radio').change(carQuestionChange); 
//truck 
$('#ecQuestions input:radio').change(truckQuestionChange); 

$('#q-contain input:radio').addClass('input_hidden'); 

$('#q-contain label').click(function() { 
    $(this).addClass('selected').siblings().removeClass('selected');  
}); 

如果你需要的答案存儲在一個陣列，其範圍必須改變功能之外。您在更改函數內創建了您的答案數組，這意味着每次用戶單擊答案時都會覆蓋它。相反，我會宣佈，你宣佈你的「QQ」變空數組：

var qq = 0, 
    lgAnswers = []; 

那麼答案推入陣：

if (qq<lgQuestions.length) {  
    lgAnswers.push(lgQuestions[qq]); 
} 

這些問題的答案將被存儲在具有數組全文檔範圍。