动态地将两个问题加载到不同的表单中，以及它们的适当答案选项。
动态地将两个问题加载到不同的表单中，以及它们的适当答案选项。
提问于 2015-11-11 21:57:12
我正试着按下一个按钮。动态地将两个问题(question1和question2)加载到不同的表单中。但它也包含了三个问题的答案可供选择。目前，我的for循环添加了一组额外的3组答案(问题2的答案)，以便从问题1中选择。
输出如下所示:
它需要是问题1(是，不，其他)和问题2 (YES2，NO2，OTHER2)。
码
<!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>回答 2
Stack Overflow用户
回答已采纳
发布于 2015-11-11 23:00:09
简单地说，您是在追加“表单”，这意味着您要在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/
希望这能有所帮助。
Stack Overflow用户
发布于 2015-11-11 22:10:11
问题就在这一行上：
$('form').append("<input type='radio' value='" + contentArray[i][x] + "'>" + contentArray[i][x] + "");javascript无法检测到要向其添加输入的form，因此它将添加到页面中的所有表单，因此必须向创建的表单添加标识符。
我将添加class以标识每个表单，并使用以下标识符对input进行append：
$('.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] + "");
}希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33660606
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号