显示数组的下一个/上一个项目

假设你有一个数组var arr = ['foo', 'bar', 'baz'];。
如果要从此数组中动态选择项目，则需要一个新变量。让我们称之为i并为其指定默认值var i = 0;

到目前为止，arr[i]; // "foo" (i === 0)

下一个和上一个

现在，让我们编写一个函数，通过修改i来选择下一项。我们可能要考虑当i大于（或等于）arr.length时我们想要发生什么。

function nextItem() {
    i = i + 1; // increase i by one
    i = i % arr.length; // if we've gone too high, start from `0` again
    return arr[i]; // give us back the item of where we are now
}

接下来，让我们做相反的事情，这次我们可能要考虑负i应该怎么做

function prevItem() {
    if (i === 0) { // i would become 0
        i = arr.length; // so put it at the other end of the array
    }
    i = i - 1; // decrease by one
    return arr[i]; // give us back the item of where we are now
}

迄今

nextItem(); // "bar" (i === 1)
prevItem(); // "foo" (i === 0 as we did `0 + 1 - 1`)
// also
prevItem(); // "baz" (decreased on 0)
nextItem(); // "foo" (increased at end of arr)

太好了，所以我们把基本算法放下来了。

将其连接到 DOM

首先要注意的是，document.write几乎总是一个坏主意。相反，为什么不给我们的元素一些唯一的id属性，并在元素存在后在JavaScript中使用DOM方法。

<div id="output"></div>
<div>
    <span id="prev_button">Previous</span>
    <span id="next_button">Next!</span>
</div>

所以现在我们可以document.getElementById('output')访问 JavaScript 中的第一个<div>，两者<span>相似。

现在，让我们在<div>中设置初始文本，这很容易

document.getElementById('output').textContent = arr[0]; // initial value
// if i is still at it's default value, we could have used i instead of 0

接下来，我们需要将事件侦听器添加到 <span> 中，以便它们执行操作。每个处理程序将以与上述类似的方式设置<div>的文本，但使用前面的相关函数。

document.getElementById('prev_button').addEventListener(
    'click', // we want to listen for a click
    function (e) { // the e here is the event itself
        document.getElementById('output').textContent = prevItem();
    }
);
document.getElementById('next_button').addEventListener(
    'click', // we want to listen for a click
    function (e) { // the e here is the event itself
        document.getElementById('output').textContent = nextItem();
    }
);

这太好了！现在唯一要做的就是确保它"在元素存在之后"运行。有两种方法可以做到这一点，一种是将 <script> 元素放在它使用的元素之后，另一种是侦听 window 上的 load 事件，即

window.addEventListener('load', function () {
    // DOM related JavaScript goes here
});

所有内容一起演示

如果你想多次这样做或将其与其他 JavaScript 混合使用，则可能需要考虑变量名称冲突。解决此问题的最简单方法是使用 IIFE 为您的变量创建一个"安全位置"，但这个答案已经足够长了。

尝试这种方式更容易并得到纠正。

<script type="text/javascript"> 
    var text = [
        "first item",
        "second item",
        "third item"
    ]; 
    var Current = 0;
    document.getElementById("textHere").innerHTML = text[Current];
    function Prev(){
        if(Current == 0){
            Current = text.length - 1;}
        else{
            Current--;}
        document.getElementById("textHere").innerHTML = text[Current];
    }
    function Next(){
        if(Current == text.length - 1){
            Current = 0}
        else{
            Current++;}
        document.getElementById("textHere").innerHTML = text[Current];
    }
</script>
<div id="textHere"></div>
<div>
    <button onclick="Next();">Next!</button>
    <button onclick="Prev();">Previous</button>
</div>

尝试这种方式，更容易和纠正。 -阿尔法学院应用程序开发人员。

<script type="text/javascript"> 
    var text = [
        "first item",
        "second item",
        "third item"
    ]; 
    var Current = 0;
    document.getElementById("textHere").innerHTML = text[Current];
    function Prev(){
        if(Current == 0){
            Current = text.length - 1;}
        else{
            Current--;}
        document.getElementById("textHere").innerHTML = text[Current];
    }
    function Next(){
        if(Current == text.length - 1){
            Current = 0}
        else{
            Current++;}
        document.getElementById("textHere").innerHTML = text[Current];
    }
</script>
<div id="textHere"></div>
<div>
    <button onclick="Next();">Next!</button>
    <button onclick="Prev();">Previous</button>
</div>