Question

我正在进行一个简单的测验，我已经明白我的脚本会加载一个新问题和新答案。我的提交按钮仅在第一次工作，如果我第二次选择答案并按提交，则脚本/页面似乎重新加载。为什么？

HOWTO：选择第二个答案（Gul，Grøn，Blå）并按'SVAR'。它会说你是对的。然后按“FORTSÆT”按钮。新问题。选择任何按钮，然后按提交。错误！
我希望你能解码我的脚本 - 和 - 语言;）只要问你是否需要更多的信息。

CODE：

$(document).ready(function () {

var current = 0;

var spg = [{
    "question": "Hvilke farver har det BRASILIANSKE flag?",
    "answer1": "Rød, Grøn, Gul",
    "answer2": "Gul, Grøn, Blå",
    "answer3": "Hvid, Grøn, Rød",
    "answer4": "Blå, Rød, Hvid",
    "correct": "Gul, Grøn, Blå"
}, {
    "question": "Hvilke farver har det ITALIENSKE flag?",
    "answer1": "Gul, Grøn, Rød",
    "answer2": "Blå, Grøn, Gul",
    "answer3": "Rød, Grøn, Hvid",
    "answer4": "Hvid, Rød, Blå",
    "correct": "Rød, Grøn, Hvid"
}, {
    "question": "Hvilke farver har det AUSTRALSKE flag?",
    "answer1": "Grøn, Gul, Rød",
    "answer2": "Grøn, Gul, Blå",
    "answer3": "Grøn, Hvid, Rød",
    "answer4": "Rød, Blå, Hvid",
    "correct": "Rød, Blå, Hvid"
}, ];

var flag = [{
    "start": ""
}, {
    "flags": "brasil.png"
}, {
    "flags": "italy.png"
}, {
    "flags": "australia.png"
}, ];

function questions() {
    $("#q").html('Spørgsmål: <br>' + spg[current].question);
};

questions();

function answers() {
    $("#a").html('Svarmuligheder: <br>' + '<input type="radio" name="a" id="1">' + spg[current].answer1 + '<br>' + '<input type="radio" name="a" id="2">' + spg[current].answer2 + '<br>' + '<input type="radio" name="a" id="3">' + spg[current].answer3 + '<br>' + '<input type="radio" name="a" id="4">' + spg[current].answer4 + '<br>' + '<input id="knapsvar" type="submit" value="Svar"><input id="continue" type="submit" value="fortsæt"><input id="forfra" type="submit" value="forfra">');
    $("#continue").hide();
    $("#forfra").hide();
};

answers();

function rigtig() {
    event.preventDefault();
    $("#c").html('svaret er RIGTIGT: <br> ' + spg[current].correct);
    $("#extra").html('<img id="flagsize" src="' + flag[1].flags + '">');
    $("#q").html('');
    $("#knapsvar").hide();
    $("#continue").show();
    $("#forfra").show(1000);

};

$('#knapsvar').click(function () {
    event.preventDefault();
    if ($('#2').is(':checked')) {
        rigtig();
    } else {
        $('#c').html('Du har ikke valgt rigtigt! Prøv igen.');
    };
});

$('#continue').click(function () {
    current++;
    $("#continue").hide(1000)
    $("#c").html('')

    questions();
    answers();
});

$('#forfra').click(function () {
location.reload();
});

}）;

Answer 1

“knapsvar”的“click”处理程序的分配应该这样完成：

$('body').on('click', '#knapsvar', function() {
  event.preventDefault();
  // and so on
}

如果你这样做，你就可以解决当前的问题：每次覆盖问题/答案的HTML时，你就会摆脱事件处理程序的分配。换句话说，您现在拥有的代码直接在您创建的元素上设置“单击”处理程序。当您创建下一个问题时，您将消除该元素，并使用它进行事件处理程序分配。

通过使用上面的委托表单，处理程序继续<body>元素。处理程序响应id为“knapsvar”的任何目标元素的点击，因此您为每个问题生成新的HTML无关紧要。

这不是原始主题，但您可以改进用于问题/答案列表的数据结构，以便更轻松地创建HTML。

var spg = [{
    "question": "Hvilke farver har det BRASILIANSKE flag?",
    answers: [
      "Rød, Grøn, Gul",
      "Gul, Grøn, Blå",
      "Hvid, Grøn, Rød",
      "Blå, Rød, Hvid"
    ],
    "correct": 1
}, {
    "question": "Hvilke farver har det ITALIENSKE flag?",
    answers: [
      "Gul, Grøn, Rød",
      "Blå, Grøn, Gul",
      "Rød, Grøn, Hvid",
      "Hvid, Rød, Blå"
    ],
    "correct": 2
}, {
    "question": "Hvilke farver har det AUSTRALSKE flag?",
    answers: [
      "Grøn, Gul, Rød",
      "Grøn, Gul, Blå",
      "Grøn, Hvid, Rød",
      "Rød, Blå, Hvid"
    ],
    "correct": 3
}, ];

现在，从中构建HTML：

function answers() {
  $("#a").html(
   'Svarmuligheder: <br>' +
   spg[current].answers.map(function(ans, index) {
     return "<input type=radio name=a id=" + index + (class == spg[current].correct ? " class=correct " : "") + "> " +
       ans + "<br>";
   }).join("") +
   '<input id="knapsvar" type="submit" value="Svar"><input id="continue" type="submit" value="fortsæt"><input id="forfra" type="submit" value="forfra">'
 );

现在检查答案是否正确的代码只需检查已检查的单选按钮是否具有“正确”类。

请注意，参加测验的人可以非常轻松地检查页面来源和作弊，无论您如何编写JavaScript代码，都是如此。使其安全的唯一方法是检查服务器上的答案。

Jquery / Javascript提交按钮：第一次成功，第二次重新加载页面

1 个答案: