Question

我正在努力制作一个充满活力的问题＆amp;答案表。

基本上我有像这样生成的输入

<input id="Question-1" class="question"></input>
<input id="Q1-Answer-1" class="answer"></input>
<input id="Q1-Answer-2" class="answer"></input>

<input id="Question-2" class="question"></input>
<input id="Q2-Answer-1" class="answer"></input>
<input id="Q2-Answer-2" class="answer"></input>

用户可以根据需要添加或删除问题和答案。现在，当一个函数被调用时，所有问题的值应该在 ul 内，并且具有相应的 li 答案。

我似乎无法弄清楚如何制作一个合适的循环，因为所有问题都附加在所有问题上。

任何帮助？

代码破碎：

function outputHTML(){
    var arrQ= new Array();
    var arrA= new Array();
    var n = $( ".result-q" ).length +1;


    $('.input-question').each(function(n){
        arrQ.push("<ul id='result-question-"+(n+1)+"' class='result-q'>"+$(this).val()+"</ul>");
    });


    $('.answer').each(function(a) {
        var ans = $(this).find('.input-answer');
        arrA.push("<li class='result-question-"+(n+1)+"'>"+$(ans).val()+"</li>");
        arrA.appendTo(result)
    });


    $("#results").append(arrQ);
}

非常感谢！

Answer 1

你可以试试这个：

outputHTML();

function outputHTML() {
    var results = '';
    $('.question')
        .each(function(){
            var $this = $(this);
            var questionNumber = $this.attr('id').split('-')[1];
            results += "<ul id='result-question-"+ questionNumber +"' class='result-q'>" + $this.val() + getAnswer(questionNumber) + "</ul>";
        });
    $('#results').html(results);
}

function getAnswer(questionNumber) {
    var answer = '';
    $('input[id^=Q' + questionNumber + '].answer')
        .each(function(){
            answer += "<li class='result-question-" + questionNumber +"'>" + $(this).val() + "</li>";
    });
    return answer;
}

这是FIDDLE。

将答案（li标签）附加到各自的Questio（ul标签）

1 个答案: