Question

我创建JSON数据库，正确显示第一个问题因为val = 0，当我为val = 1更改val时，我得到第二个问题。所以一切正常，但是当我试图使用按钮时......你什么都没有......

HTML：

<!DOCTYPE html>
<html lang="pl-PL">
<head>
    <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="question.json"></script>
    <title>Quiz</title>

    <script>
$(function() {

$.getJSON("question.json", function(json) {
    val = 0;
    if($("#next").data('clicked')){
        val = val+1;
    }
    var x = json.Endokrynologia[val];
    document.getElementById("title").innerHTML = x.title;
    document.getElementById("id").innerHTML = x.id;
    document.getElementById("question").innerHTML = x.question;
    document.getElementById("ans1").innerHTML = x.answear01;
    document.getElementById("ans2").innerHTML = x.answear02;
    document.getElementById("ans3").innerHTML = x.answear03;
    document.getElementById("ans4").innerHTML = x.answear04;
    document.getElementById("ans5").innerHTML = x.answear05;
    document.getElementsByName("answear")[0].value = x.answear01;
    document.getElementsByName("answear")[1].value = x.answear02;
    document.getElementsByName("answear")[2].value = x.answear03;
    document.getElementsByName("answear")[3].value = x.answear04;
    document.getElementsByName("answear")[4].value = x.answear05;


});

 $("input[name=answear]:radio").change(function () {
        return ans = $("input[name=answear]:checked").val();
   });
$("#result").click(function(){
                     alert(ans);
                     });


});
</script>
</head>

<body>
<div id="demo">
    <h1 id="title"></h1>
    <p id="id"></p><p id="question"></p>
    <input type="radio" name="answear"><label id="ans1"></label></br>
    <input type="radio" name="answear"><label id="ans2"></label></br>
    <input type="radio" name="answear"><label id="ans3"></label></br>
    <input type="radio" name="answear"><label id="ans4"></label></br>
    <input type="radio" name="answear"><label id="ans5"></label></br>
</div>
<button id="result">button </button>
<button id="next">next</button>
</body>
</html>

也尝试：

$("#next").click(function(i, val) { return val*1+1 });

因为getJSON

and $("#next").click(function(i, val) {
var val =0 ;
var val*1+1;
   $.getJSON("question.json", function(json) {....}
});

单击按钮时有效，但是当加载文件我没有输出时...我错过了什么但是什么？

Answer 1

您的next按钮实际上没有做任何事情。您希望它操纵某个值，然后相应地填充表单。更像下面显示的内容。请注意，我已移除了对getJSON的调用，因为它应该做的只是设置json的值：

var json;
var val;

function populate(x) {
  document.getElementById("title").innerHTML = "Data: "+x;
  // population of other stuff here, removed for clarity
}

$(function() {
  val = 0;
  //   code to populate the json variable from the external resource is not used, it's being replaced with a stub
  // $.getJSON("question.json", function(response) {
  //     json = response;
  //     populate(json.Endokrynologia[val]);
  // }
  //
  // ----- <stub> -----
  json = { Endokrynologia: [ "one", "two", "bar", "foo" ] };
  populate(json.Endokrynologia[val]);
  // ----- </stub> -----

  $("#next").on('click', function(event) {
      val = val + 1;
      populate(json.Endokrynologia[val]);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="demo">
  <h3 id="title"></h3>
    <p id="id"></p>
    <p id="question"></p>
    <input type="radio" name="answear"><label id="ans1"></label></br>
    <input type="radio" name="answear"><label id="ans2"></label></br>
    <!-- other elements removed for clarity -->
    </div>
    <button id="result">button </button>
    <button id="next">next</button>
  </body>
</html>

JSON值++，不能改变值

1 个答案: