Jquery Form - 将答案存储在数组中

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 并将项目留空（你可以在小提琴中看到这个）。然后为每个是的答案创建一个新的 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');    
});

如果您需要将答案存储在数组中，则其范围需要在更改函数之外。您在 change 函数中创建了 answers 数组，这意味着每次用户单击答案时它都会被覆盖。相反，我会声明一个空数组，在其中声明“qq”变量：

var qq = 0,
    lgAnswers = [];

然后将答案压入数组中：

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

答案将存储在具有完整文档范围的数组中。