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单选按钮的change事件上具有的功能需要在q1 change事件上的函数内调用。 我相信这种经过修饰的小提琴具有您想要的行为。

更新：要显示回答“是”的问题，您可以随时将其添加到显示列表中。 给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');    
});

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

var qq = 0,
    lgAnswers = [];

然后将答案推入数组：

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

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