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

I want the "displayround" div to show a certain value in my array. When the page loads the first value in the array (1/38) is being displayed. When I press the "next" button I want it to show the next value in the array (2/38) and so on. And when I press "previous" button I want it to display the value that comes before the displayed value.

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

HTML:

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>

My Jquery/javascript:

我的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]);

Here is the next button function:

这是下一个按钮功能：

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

}); //end of document.ready function

Any help appreciated!

任何帮助赞赏！

2 个解决方案

#1

I will store index in some location, such .data()

我将索引存储在某个位置，例如.data（）

Initially

原来

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

In function next function call fetch index and use it

在函数next函数中调用fetch index并使用它

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

Similarity, In previous method call

相似之处，在之前的方法调用中

Note: You have take care array length

注意：您需要注意数组长度

EDIT

do you have a solution similar to ojovirtual regarding the overflow? When it's at 38/38 I want it to go back to 1/38 and vice versa.

你有关于溢出的类似于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);
});

DEMO

DEMO

#2

You can add a hidden field with the value you are showing and update it every time the user clicks "next" or "previous":

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

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

And then in your javascript:

然后在你的JavaScript中：

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

Note that if the user keeps clicking the "Next" button, we set the value to '0', so next to 38/38 it will show 1/38 again. The "previous" click function will be very similar.

请注意，如果用户继续单击“下一步”按钮，我们将值设置为“0”，因此在38/38旁边将再次显示1/38。 “之前”的点击功能非常相似。