Question

我希望“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

任何帮助表示赞赏！

Answer 1

我会将索引存储在某个位置，例如.data()

首先

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

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

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

DEMO

Answer 2

您可以使用您显示的值添加隐藏字段，并在每次用户点击＆＃34; next＆＃34;或者＆＃34;之前＆＃34;：

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

然后在你的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);
});

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

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

2 个答案:

修改