Question

我正试图按一下按钮。将两个问题（问题1和问题2）动态加载到单独的表单中。但它也包含3个答案可供选择的问题。目前，我的for循环增加了另外一组3个答案（问题2的答案），可供选择问题1

输出如下所示：

需要问题1（是，否，其他）和问题2（YES2，NO2，OTHER2）

CODE

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="center col-xs-12">
        <button class="contentBtn btn"><label for="contentBtn">CONTENT</label></button>
    </div>
    <div class="row-2 center col-xs-12"></div>
    <script src="js/jquery-1.11.3.min.js" type='text/javascript'>
    </script> 
    <script>
    $('.contentBtn').click(function(){
        var contentArray = [

        ["QUESTION1?", "YES", "NO", "OTHER"],
        ["QUESTION2?", "YES2", "NO2", "OTHER2"]
        ];

    for (var i = 0; i < contentArray.length; i++){
    $('.row-2').append("<form><span class='question'>" + contentArray[i][0] + "<\/span><br>")
    for (var x = 1; x < 4; x++){
    $('form').append("<input type='radio' value='" + contentArray[i][x] + "'>" + contentArray[i][x] + "");
    }
    $('.row-2').append("<\/form><br>");
    }
    });

    </script>
</body>
</html>

Answer 1

问题出在这一行：

$('form').append("<input type='radio' value='" + contentArray[i][x] + "'>" + contentArray[i][x] + "");

javascript无法检测到您要为其添加输入的form，因此它会附加到页面中的所有表单，因此您必须在您创建的表单中添加标识符。

我将添加class以识别每个表单，append使用此标识符input：

$('.row-2').append("<form class='form_"+i+"'><span class='question'>" + contentArray[i][0] + "</span><br>")
for (var x = 1; x < 4; x++){
     $('.form_'+i).append("<input type='radio' value='" + contentArray[i][x] + "'>" + contentArray[i][x] + "");
}

希望这有帮助。

<强> Working fiddle

Answer 2

简短的回答是你要附加'form'，这意味着你要在DOM上附加每个表单。代码也破坏了DOM。输入未关闭，并且不应在示例中给出的部分中进行追加。

// Always favor the 'on' events instead of the 'click' events.
$('.contentBtn').on('click', function () {
    var contentArray = [
        ['QUESTION1?', 'YES', 'NO', 'OTHER'],
        ['QUESTION2?', 'YES2', 'NO2', 'OTHER2']
    ];

    // we are going to use a for each on the first item, 
    // we could use a for as well but it just is really messy. 
    // remember that variables are defined at function scope, not block scope.
    $(contentArray).each(function (index, item) {
        // our item in the array is directly coming in to us now.
        // do not add incomplete html blocks to the dom, always 
        // create them and then add them!
        var newContent = $('<form><span class="question">' + 
              item[0] + '</span><br></form><br>');

        // now we will foreach, but instead of going by a length of 4, 
        // I am looking at the actual length of the array.
        for (var i = 1; i < item.length; i++) {

            // we are going to precreate our dom object.
            var answerContent = $('<input type="radio" value="' + 
                  item[i] + '">' + item[i] + '</input>');

            // now we are going to append the object to our form object.
            newContent.append(answerContent);
        }

        // now that the structure is complete we will append the browser dom.
        $('.row-4').append(newContent);
     });
});

我为你创建了一个带有评论的纠正小提琴。 https://jsfiddle.net/t9h91nbk/

希望这有帮助。

将两个问题动态加载到单独的表单中以及相应的答案选项

2 个答案: