循環在數組元素上停滯

Question

我試圖通過分別使用“上一個”和“下一個”按鈕在數組中移動來循環遍歷數組。

直到您更改“方向”並嘗試說，例如“下一個”然后“上一個”，它都可以正常工作

數組顯示的元素已經存在，而不顯示數組的前一個元素。

例如，我在4上，單擊“上一個”按鈕，它仍然在4上。您必須再次按下“上一個”按鈕，以使其回到3。

我在這里想念什么...？

 var numbers = ["I am index number 0", "I am index number 1", "I am index number 2", "I am index number 3", "I am index number 4", "I am index number 5"]; var i=0; var text = ""; document.getElementById("back").addEventListener("click", function previous() { if (i-1 >= 0) { var text = numbers[--i]; } document.getElementById("filler").innerHTML = text; }); document.getElementById("forward").addEventListener("click", function next(){ if (i < numbers.length) { var text = numbers[i++]; } document.getElementById("filler").innerHTML = text; }); 

 <p id="filler"></p> <button id="back">PREVIOUS</button> <button id="forward">NEXT</button> 

Answer 1

實際上，您所看到的是遞增之前的值，而不是遞增之后的值。 ++i遞增值，然后返回值，另一方面， i++返回當前值，然后遞增值。

還有另一條建議，您不需要一直創建var text ，一旦創建並定義為空，最好只使用text = numbers[--i]而不使用var 。

我注意到的另一件事是，在第二個條件（if）中，應該執行if (i < numbers.length - 1)因為.length方法從1開始計數。

我為你做了一個jsfidddle :) https://jsfiddle.net/t2cjf5m8/16/

Answer 2

首先，您應該看看Crayon Violent的評論

--i遞減該值，然后返回該值。 i ++返回當前值，然后遞增。 如果希望它們的行為相同，請使用--i和++ i或在索引引用之外進行操作。

您不應該在ifs中重新定義文本

var text = numbers[--i];

下面的解決方案有效：

  var numbers = ["I am index number 0", "I am index number 1", "I am index number 2", "I am index number 3", "I am index number 4", "I am index number 5"]; var i = -1; var text = ""; document.getElementById("back").addEventListener("click", function previous() { if (i > 0) { text = numbers[--i]; } document.getElementById("filler").innerHTML = text; }); document.getElementById("forward").addEventListener("click", function next(){ if (i < numbers.length - 1) { text = numbers[++i]; } document.getElementById("filler").innerHTML = text; }); 

 <p id="filler"></p> <button id="back">PREVIOUS</button> <button id="forward">NEXT</button> 

Answer 3

我在下面修改了您的代碼以使其正常工作：

<p id="filler"></p>
<button id="back">PREVIOUS</button>
<button id="forward">NEXT</button>


<script>
    var numbers = [
        "I am index number 0",
        "I am index number 1",
        "I am index number 2 ",
        "I am index number 3",
        "I am index number 4",
        "I am index number 5"
    ];
    var i = 0;
    var text = "";



    document.getElementById("back").addEventListener("click", function previous() {
        if (i - 1 >= 0) {
            var text = numbers[i--];
            document.getElementById("filler").innerHTML = text;
        }
    });




    document.getElementById("forward").addEventListener("click", function next() {
        if (i < numbers.length) {
            var text = numbers[i++];
            document.getElementById("filler").innerHTML = text;
        }
    });
</script>

我所做的唯一更改是在var text = numbers[i--]; 我從左到右更改了操作員的位置。 "If the operator appears before the variable, the value is modified before the expression is evaluated. If the operator appears after the variable, the value is modified after the expression is evaluated." 引用自： https : //docs.microsoft.com/en-us/scripting/javascript/reference/increment-and-decrement-operators-javascript