Question

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

$(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);   
  }
});

Answer 1

在设置显示后，您只需递增index 。

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

这应该有效：

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

Answer 2

在调用index之前增加displayItem() 。实际上，您会在加载时显示arrayResponse[0]，然后将index留在0以进行下一次展示。

相反：

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

请注意，在致电index之前，我们还会检查displayItem是否有效;尝试在数组末尾显示元素是没有意义的。

Answer 3

现在您加载第一个项目（索引0），然后当您单击下一个按钮时，它会在您增加索引之前加载相同的项目。首先增加索引，然后加载下一个项目

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

Answer 4

如果您第二次单击该按钮，您的代码将显示下一个元素。但是，如果要在第一次单击按钮时显示下一个值，请先增加索引并调用该函数。

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

Answer 5

我明白问题.. Javascripts代码是正确的！但是它对我的html代码不起作用......我尝试了另一个简单的html代码并且正在使用它！

这是我的HTML代码：import {Directive, ElementRef} from "@angular/core"; declare var $: any; @Directive({ selector: '[money]' }) export class CurrencyMaskDirective { constructor(public el: ElementRef) { let native = el.nativeElement; $(native).maskMoney({ suffix: " $", thousands: '،', decimal: '', precision: 3, affixesStay: false }); } }

如何在表单HTML上显示下一个项目

5 个答案: