如何使用 jQuery 使用按钮一个一个地遍历数组

Question

我有一个对象数组，我需要通过按钮遍历每个对象。我已经设置好了，它正在运行，但每次点击都会跳过 2，而不是进入下一条记录。以下是我所拥有的。有人可以帮我吗？还是有更好的方法逐个遍历数组？

$(document).ready(function() {

  var i = 0;

  var values = [{

      "currentJob": "Job1",

      "StreetAddress": "xxx",

      "Place": "yyy"

    },

    {

      "currentJob": "Job2",

      "StreetAddress": "xxx2",

      "Place": "yyy2"

    },

    {

      "currentJob": "Job3",

      "StreetAddress": "xxx3",

      "Place": "yyy3"

    },

    {

      "currentJob": "Job4",

      "StreetAddress": "xxx34",

      "Place": "yyy4"

    },

    {

      "currentJob": "Job5",

      "StreetAddress": "xxx5",

      "Place": "yyy5"

    }

  ]

  i = (i) % values.length;

  //Here is where I iterate through using a button

  $(".btn-arrow-up").click(function() {

    i = i + 1;

    $(".current-job-box").html(values[i].currentJob);

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type='button' class='btn-arrow-up'>up</button>

<hr/>

<div class='current-job-box'><em>result</em></div>

Answer 1

代替i&nbsp;=&nbsp;i&nbsp;+1; $(".current-job-box").html(values[i].currentJob);尝试$(".current-job-box").html(values[i].currentJob);&nbsp;&nbsp;&nbsp;&nbsp; i&nbsp;=&nbsp;i&nbsp;+1;这个结果是因为你首先递增 i 开始是 0 并且递增之后是 1 所以下一行采用第二个元素而不是数组的第一个元素。我还删除了这一行：&nbsp;&nbsp;i&nbsp;=&nbsp;(i)&nbsp;%&nbsp;values.length;因为我觉得没必要PS：您好，欢迎来到 StackOverflow :D

Answer 2

$(document).ready(function() {&nbsp;var i = 0;var flag = true;var values = [{&nbsp; &nbsp; "currentJob":"Job1",&nbsp; &nbsp; "StreetAddress": "xxx",&nbsp; &nbsp; "Place":"yyy"},{&nbsp; &nbsp; "currentJob":"Job2",&nbsp; &nbsp; "StreetAddress": "xxx2",&nbsp; &nbsp; "Place":"yyy2"},{&nbsp; &nbsp; "currentJob":"Job3",&nbsp; &nbsp; "StreetAddress": "xxx3",&nbsp; &nbsp; "Place":"yyy3"},{&nbsp; &nbsp; "currentJob":"Job4",&nbsp; &nbsp; "StreetAddress": "xxx34",&nbsp; &nbsp; "Place":"yyy4"},{&nbsp; &nbsp; "currentJob":"Job5",&nbsp; &nbsp; "StreetAddress": "xxx5",&nbsp; &nbsp; "Place":"yyy5"}]i = (i) % values.length;//Here is where I iterate through using a button$(".btn-arrow-up").click(function() {&nbsp;if(flag){$(".current-job-box").html(values[i].currentJob);flag = false;}else{i = i +1;$(".current-job-box").html(values[i].currentJob);}console.log(values[i].currentJob);});});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div><span class="btn-arrow-up">ddddddd</span></div>