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

debugcn 发表于 Dev

Duplo W.

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

HTML：

<div id="buttonholder">
    <button id="previous">< Previous round</button>
    <button id="next">Next round ></button>
    <button id="current">> Current round <</button>
    <div style="font-size: 0;">
        <form id="inputfield">
            <input type="inputfield" value="Search for round here..."></input>
            <button id="submit">Go</button>
        </form>
    </div>
    <div id="displayround">
    </div>
</div>

我的Jquery / javascript：

$(document).ready(function() { 

var round = new Array();
round[0]="1/38";
round[1]="2/38";
round[2]="3/38";
round[3]="4/38";
round[4]="5/38";
round[5]="6/38";
round[6]="7/38";
round[7]="8/38";
round[8]="9/38";
round[9]="10/38";
round[10]="11/38";
round[11]="12/38";
round[12]="13/38";
round[13]="14/38";
round[14]="15/38";
round[15]="16/38";
round[16]="17/38";
round[17]="18/38";
round[18]="19/38";
round[19]="20/38";
round[20]="21/38";
round[21]="22/38";
round[22]="23/38";
round[23]="24/38";
round[24]="25/38";
round[25]="26/38";
round[26]="27/38";
round[27]="28/38";
round[28]="29/38";
round[29]="30/38";
round[30]="31/38";
round[31]="32/38";
round[32]="33/38";
round[33]="34/38";
round[34]="35/38";
round[35]="36/38";
round[36]="37/38";
round[37]="38/38";

$("#buttonholder").find("button").addClass("left")
$("#buttonholder").find("#submit").removeClass("left").addClass("right")
$("#buttonholder").find("#inputfield").addClass("right");

$("#displayround").text(round[0]);

这是下一个按钮功能：

$("#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，反之亦然。

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

演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。