Question

我将数组的第一项写入屏幕，并希望为数组创建Next/Previous按钮，但我无法让它工作。我尝试了几种方法，但我找不到合适的解决方案。

有人可以帮忙吗？

这是我尝试的最后一个：

<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>

Answer 1

假设您有一个数组 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几乎总是一个坏主意。相反，为什么不给我们的 Elements 一些唯一的 id属性并在 JavaScript中使用 DOM 方法 Elements 之后。

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

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

现在，我们可以将{em> JavaScript 中的第一个<div>作为document.getElementById('output')访问，并将两个<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

接下来，我们需要将event listeners添加到<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();
    }
);

太好了！现在唯一要做的就是确保它运行＆＃34;在 Elements 存在之后＃34;。有两种方法可以做到这一点，方法是将<script>元素放在它使用的元素之后，或者在窗口上监听加载事件，即

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

DEMO所有事情

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

Answer 2

尝试这种方式更容易和纠正。

<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>

Answer 3

尝试这种方式，更容易且更正。 -Alfa College应用开发人员。

<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>

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

3 个答案:

下一个和上一个

将其连接到 DOM