我正在使用JSON数据并使用它来创建代表Question和MCQ的HTML数据。我已经能够以HTML格式加载数据，但现在我想捕获数组中用户的响应。我想在用户按下提交按钮后存储用户已选中的单选按钮。
var obj = JSON.parse(
'{"single": [{"id": 1,"question": "this is a question1?","option": ["option1","option2","option3","option4"]},{"id": 2,"question": "this is a question2?","option": ["option1","option2","option3","option4"]},{"id": 3,"question": "this is a question3?","option": ["option1","option2","option3","option4"]},{"id": 4,"question": "this is a question4?","option": ["optionu1","optionu2","optionu3","optionu4"]}],"multiple": [{"id": 1,"question": "this is a multiple question1?","option": ["optionm1","option2lj","option3","option4"]},{"id": 2,"question": "this is a multiple question2?","option": ["optionm1","option2j","option3","option4"]},{"id": 3,"question": "this is a multiple question3?","option": ["optionm1","option2gg","option3","option4"]},{"id": 4,"question": "this is a multiple question4?","option": ["optionm1","option2h","option3","option4"]}],"integer": [{"id": 1,"question": "this is a int question1?"},{"id": 2,"question": "this is a int question2?"},{"id": 3,"question": "this is a int question3?"},{"id": 4,"question": "this is a int question4?"}]}'
);
var s = [0, 0]; //only single correct;
var t = []; //only multiple choice
var u = []; //only numeric type
$(document).ready(function() {
});
function my(check, sub, err) {
console.log(check + " " + sub + " " + err);
var f = 0;
if (document.getElementById("test" + check - 3).checked) {
f = 1;
s[0] = 1;
} else if (document.getElementById("test" + check - 2).checked) {
f = 1;
s[0] = 2;
} else if (document.getElementById("test" + check - 1).checked) {
f = 1;
s[0] = 3;
} else if (document.getElementById("test" + check).checked) {
f = 1;
s[0] = 4;
} else {
$("#error" + err).show();
}
if(f===1){
document.getElementById("submit" + sub).disabled = true;
$("#error"+err)
.show()
.text("Your answer has been successfully submitted.");
}
}
function read() {
var pages = obj.single;
var x = 4; //for tests and creating new ID's
var sub = 1; //for submission
var err = 1; //for errors
pages.forEach(function(page) {
var test =
"<div class='row'>" +
"<div class='col s12 m12'>" +
"<div class='card teal accent-1 hoverable' id='car'>" +
"<div class='card-content center-align'>" +
"<span class='card-title'>" +
"Question " +
page.id +
"</span>" +
"<form action='#'>" +
"<p>" +
page.question +
"</p>" +
"<p><input name='group1' type='radio' id='test" +
(x - 3) +
"'/>" +
"<label for='test" +
(x - 3) +
"'>" +
page.option[0] +
"</label></p>" +
"<p><input name='group1' type='radio' id='test" +
(x - 2) +
"'/>" +
"<label for='test" +
(x - 2) +
"'>" +
page.option[1] +
"</label></p>" +
"<p><input name='group1' type='radio' id='test" +
(x - 1) +
"'/>" +
"<label for='test" +
(x - 1) +
"'>" +
page.option[2] +
"</label></p>" +
"<p><input name='group1' type='radio' id='test" +
x +
"'/>" +
"<label for='test" +
x +
"'>" +
page.option[3] +
"</label></p>" +
"</form>" +
"<h6 id='error" +
err +
"'>Please select an option</h6>" +
"</div>" +
"<div class='card-action center'>" +
"<button class='btn' onclick='my(" +
x +
"," +
sub +
"," +
err +
")' id='submit" +
sub +
"'>Submit</button>" +
"</div>" +
"</div>" +
"</div>" +
"</div>";
$(".container").append(test);
console.log(test);
x += 4;
sub++;
err++;
});
}
read();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>
我也在我的代码中使用materialize.css。 我的问题是在单击提交功能后没有任何作用。这是它进入函数但不检查用户是否检查了一个单选按钮（我认为它不允许任何jquery方法工作。） 但是如果我将我的函数放在$（document）.ready（）方法中，我的函数不起作用，但放在其中的任何单个jQuery事件都会起作用。我真的很困惑请帮助我。 提前感谢你。
答案 0 :(得分：1)
您有运营商优先级问题。加法和减法是关联的，因此"test" + check - 3首先执行"test" + check，然后从中减去3。但是"test4" - 3没有意义，你不能从字符串中减去一个数字。您需要括号来覆盖默认值"test" + (check -3)，因此它首先进行减法，然后连接结果。
var obj = JSON.parse(
'{"single": [{"id": 1,"question": "this is a question1?","option": ["option1","option2","option3","option4"]},{"id": 2,"question": "this is a question2?","option": ["option1","option2","option3","option4"]},{"id": 3,"question": "this is a question3?","option": ["option1","option2","option3","option4"]},{"id": 4,"question": "this is a question4?","option": ["optionu1","optionu2","optionu3","optionu4"]}],"multiple": [{"id": 1,"question": "this is a multiple question1?","option": ["optionm1","option2lj","option3","option4"]},{"id": 2,"question": "this is a multiple question2?","option": ["optionm1","option2j","option3","option4"]},{"id": 3,"question": "this is a multiple question3?","option": ["optionm1","option2gg","option3","option4"]},{"id": 4,"question": "this is a multiple question4?","option": ["optionm1","option2h","option3","option4"]}],"integer": [{"id": 1,"question": "this is a int question1?"},{"id": 2,"question": "this is a int question2?"},{"id": 3,"question": "this is a int question3?"},{"id": 4,"question": "this is a int question4?"}]}'
);
var s = [0, 0]; //only single correct;
var t = []; //only multiple choice
var u = []; //only numeric type
$(document).ready(function() {
});
function my(check, sub, err) {
console.log(check + " " + sub + " " + err);
var f = 0;
if (document.getElementById("test" + (check - 3)).checked) {
f = 1;
s[0] = 1;
} else if (document.getElementById("test" + (check - 2)).checked) {
f = 1;
s[0] = 2;
} else if (document.getElementById("test" + (check - 1)).checked) {
f = 1;
s[0] = 3;
} else if (document.getElementById("test" + check).checked) {
f = 1;
s[0] = 4;
} else {
$("#error" + err).show();
}
if(f===1){
document.getElementById("submit" + sub).disabled = true;
$("#error"+err)
.show()
.text("Your answer has been successfully submitted.");
}
}
function read() {
var pages = obj.single;
var x = 4; //for tests and creating new ID's
var sub = 1; //for submission
var err = 1; //for errors
pages.forEach(function(page) {
var test =
"<div class='row'>" +
"<div class='col s12 m12'>" +
"<div class='card teal accent-1 hoverable' id='car'>" +
"<div class='card-content center-align'>" +
"<span class='card-title'>" +
"Question " +
page.id +
"</span>" +
"<form action='#'>" +
"<p>" +
page.question +
"</p>" +
"<p><input name='group1' type='radio' id='test" +
(x - 3) +
"'/>" +
"<label for='test" +
(x - 3) +
"'>" +
page.option[0] +
"</label></p>" +
"<p><input name='group1' type='radio' id='test" +
(x - 2) +
"'/>" +
"<label for='test" +
(x - 2) +
"'>" +
page.option[1] +
"</label></p>" +
"<p><input name='group1' type='radio' id='test" +
(x - 1) +
"'/>" +
"<label for='test" +
(x - 1) +
"'>" +
page.option[2] +
"</label></p>" +
"<p><input name='group1' type='radio' id='test" +
x +
"'/>" +
"<label for='test" +
x +
"'>" +
page.option[3] +
"</label></p>" +
"</form>" +
"<h6 id='error" +
err +
"'>Please select an option</h6>" +
"</div>" +
"<div class='card-action center'>" +
"<button class='btn' onclick='my(" +
x +
"," +
sub +
"," +
err +
")' id='submit" +
sub +
"'>Submit</button>" +
"</div>" +
"</div>" +
"</div>" +
"</div>";
$(".container").append(test);
console.log(test);
x += 4;
sub++;
err++;
});
}
read();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>