Javascript 如何使用按钮调用数组中的下一个值和上一个值？

我希望“displayround”div在数组中显示某个值。当页面加载时，将显示数组中的第一个值（1/38）。当我按下“下一步”按钮时，我希望它显示数组中的下一个值（2/38），依此类推。当我按下“previous”按钮时，我希望它显示显示值之前的值

HTML:

下面是“下一步”按钮功能：

$("#next").click(function() {
    $("#displayround").text()
});

}); //end of document.ready function

---

感谢您的帮助

我将把索引存储在某个位置，例如

.data（）

最初

 $("#displayround").text(round[0]).data('index', 0);

在函数中，下一个函数调用获取索引并使用它

$("#next").click(function() {
    var index = +$("#displayround").data('index');
    $("#displayround").text(round[index + 1]).data('index', index + 1);
});

相似性，在上一个方法调用中

注意：您必须注意数组长度

编辑 关于溢出问题，您是否有类似于ojovirtual的解决方案？当它在38/38时，我希望它回到1/38，反之亦然

$（“#上一个”）。单击（函数（）{
var index=+$（“#displayround”）。数据（'index'）-1；
如果（索引=圆形长度）索引=0；
$（“#displayround”）.text（round[index]）.data（'index'，index）；
});

---

您可以添加一个隐藏字段，该字段具有显示的值，并在用户每次单击“下一步”或“上一步”时进行更新：

---

请注意，如果用户一直单击“下一步”按钮，我们将该值设置为“0”，因此38/38旁边将再次显示1/38。“previous”click函数将非常类似。

我将使用此解决方案，因为最好将迭代器存储在

数据-

属性中，然后作为全局

变量I=0

variableIt也比使用单独的隐藏字段来存储值要好，因为这只会创建一个额外的依赖项。谢谢。然而，我确实注意到了一个小问题。当我显示数组中的第一个值，然后按“上一步”几次时，它似乎在调用不存在的数组，然后我必须按“下一步”的次数与按“上一步”的次数相同，以便它显示下一个数组？@DuploW，我分享了一种方法，这样你就可以专注于并实现你想要的结果。很高兴我能help@Satpal关于溢出问题，您是否有类似于ojovirtual的解决方案？当它在38/38时，我希望它回到1/38，反之亦然。。当用户单击下一步时，您的38/38到1/38和1/38到38/38方法就是我现在需要的，因为Satpal的方法不包括这一点。我有没有办法在不创建隐藏字段的情况下将您的方法与his合并？

 $("#displayround").text(round[0]).data('index', 0);

$("#next").click(function() {
    var index = +$("#displayround").data('index');
    $("#displayround").text(round[index + 1]).data('index', index + 1);
});

$("#previous").click(function () {
    var index = +$("#displayround").data('index') - 1;
    if (index <= 0) index = round.length - 1;
    $("#displayround").text(round[index]).data('index', index);
});

$("#next").click(function () {
    var index = +$("#displayround").data('index') + 1;
    if (index >= round.length) index = 0;
    $("#displayround").text(round[index]).data('index', index);
});

<input type='hidden' name='actualValue' value='0'/>

$("#next").click(function() {
    var actualValue=parseInt($("input[name=actualValue]").val());
    $("#displayround").text(round[actualValue]);
    actualValue++;
    if (actualValue >= round.length) //check for overflow
        actualValue=0;
    $("input[name=actualValue]").val(actualValue);
});