顯示數組的下一個/上一個項目

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']; 。
如果要從此Array中動態選擇項目，則需要一個新變量。 我們稱之為i並給它一個默認值var i = 0;

到目前為止， arr[i]; // "foo" (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存在之后給我們的Elements一些唯一的 id屬性並在JavaScript中使用DOM方法。

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

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

所以現在我們可以訪問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

接下來，我們需要向<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>元素放在它使用的元素之后，或者通過在窗口上監聽load事件 ，即

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

---

所有事物的演示

---

如果您想多次執行此操作或將其與其他JavaScript混合使用 ，則可能需要考慮變量名稱沖突。 解決這個問題的最簡單方法是使用IIFE為變量創建一個“安全的地方”，但這個答案已經足夠長了。

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 Application Developer。

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