如何在表单HTML上显示下一项 [英] How to display next item on form HTML

问题描述

我正在尝试使用displayItem函数显示数组JSON中的下一项，但是单击该按钮后，表单将重新加载第一个值(arrayResponse[0]).我应该怎么做才能显示下一个项目?

I am trying to display next item from array JSON with the displayItem function, but after clicking the button, the form reloads the first value (arrayResponse[0]). What should I do to display the next item instead?

$(document).ready(function() {
  var firstElement;
  var arrayResponse;
  var index =0;    

  var request = new XMLHttpRequest();

  // When the file has loaded,
  request.onload = function () {

    // parse the JSON text into an array of post objects.
    arrayResponse = JSON.parse(request.responseText);

    firstelement = arrayResponse[0];
    $("#name").val(firstelement.name);
    $("#author").val(firstelement.author);
    $("#content").val(firstelement.content);     
  };

  request.open("GET", "http://127.0.0.1/HTML_JavaScripts_Test/posts.json", true);
  request.send(null);

  $("#nextButton").bind("click", function(){
    displayItem(arrayResponse[index]);
    index++;
  });

  function displayItem(item) {
    $("#name").val(item.name);
    $("#author").val(item.author);
    $("#content").val(item.content);   
  }
});

推荐答案

在设置显示之后，您只增加index .

You are only incrementing index after setting the display.

您设置了onload中的第一个元素，然后通过单击按钮显示了相同的元素.

You set the first element from the onload, and then you show that same element from your button click.

这应该有效:

$("#nextButton").bind("click", function(){
    index++;
    displayItem(arrayResponse[index]);
});

这篇关于如何在表单HTML上显示下一项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！