如何使用 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 = i +1;
$(".current-job-box").html(values[i].currentJob);

尝试

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

这个结果是因为你首先递增 i 开始是 0 并且递增之后是 1 所以下一行采用第二个元素而不是数组的第一个元素。

我还删除了这一行：

  i = (i) % values.length;

因为我觉得没必要

PS：您好，欢迎来到 StackOverflow :D

Answer 2

$(document).ready(function() { 

var i = 0;

var flag = true;

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() { 

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>