显示数组的下一个/上一个项目 [英] Show Next/Previous item of an array

问题描述

我正在将数组的第一项写入屏幕，并想为数组创建 Next/Previous 按钮，但无法正常工作.我尝试了几种方法，但是找不到合适的解决方案.

I'm writing the first item of an array to the screen, and would like to create Next/Previous buttons for array, but I can't get it to work. I have tried several methods, but I can't find suitable solution.

任何人都可以帮忙吗?

这是我尝试过的最后一个:

This is the last one I have tried:

<div>
<script type="text/javascript"> 
sav = new Array(
"first item",
 "second item",
 "third item", 
 ); 

document.write(sav[0] + " <br>"); 
</script>
</div>

<div>
<a href="" onClick="javascript: sav[i++]">Previous</a>
<a href="" onClick="javascript: sav[i--]">Next!</a>
</div>

推荐答案

假设您有一个 Array var arr = ['foo'，'bar'，'baz']; .
如果要从此 Array 中动态选择项目，则需要一个新变量.让我们将此 i 命名为默认值 var i = 0;

Say you have an Array var arr = ['foo', 'bar', 'baz'];.
If you want to dynamically choose items from this Array, you'll need a new variable. Let's call this i and give it a default value var i = 0;

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

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

Now, lets write a function to choose the next item by modifying i. We may want to consider what we want to happen when i is bigger than (or equal to) arr.length as well.

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

Next, lets do the reverse, this time we might want to consider what should happen for negative 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)

太好了，因此我们已经掌握了基本算法.

Great, so we've got the basic algorithms down.

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

First thing to note is that document.write is nearly always a bad idea. Instead, why not give our Elements some unique id attributes and use DOM methods in JavaScript after the Elements exist.

<div id="output"></div>

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

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

So now we can access the first <div> in JavaScript as document.getElementById('output'), and the two <span>s similarly.

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

Now, let's set the initial text in the <div>, this is quite easy

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> s，以便他们执行操作.每个处理程序都将以与上述类似的方式设置< div> 的文本，但使用之前的相关 function .

Next, we need to add event listeners to the <span>s so they perform an action. The handler of each will set the text of the <div> in a similar way to above, but using the relevant function from earlier.

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> 元素放在其使用的元素之后，或者通过侦听窗口上的 load事件，即

This is great! Now the only thing left to do is make sure it runs "after the Elements exist". There are two ways to do this, either by putting the <script> element after the elements it uses, or by listening for the load event on window, i.e.

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

---

演示 一起

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

If you want to do this multiple times or are mixing it with other JavaScript, you may need to consider variable name conflicts. The easiest way to get around this is by using an IIFE to create a "safe place" for your variables, but this answer is already long enough.

这篇关于显示数组的下一个/上一个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！