Question

我有一个阵列，每当用户点击一个按钮时，我都试图在两个方向上逐步完成。每次我点击下一步，它都会正确地逐步显示，但是，如果我点击上一步，它就不会向相反的方向前进。为什么呢？

JS

var i = 0;
var images = ["Hello", "Goodbye", "Hola", "Adios"];

$("#next").on("click", function(){
    if(i <= images.length - 1){
        $("#result").children("p").remove();
        $("#result").append("<p>" +images[i++] +"</p>");
    }
})

$("#prev").on("click", function(){
    if(i > 0){
        $("#result").children("p").remove();
        $("#result").append("<p>" +images[i--] +"</p>");
    }
})

HTML

<button id="prev">Previous</button>
<div id="result"></div>
<button id="next">Next</button>

编辑：如果我将前一个按钮的条件更改为if(i > 0)，这也不是您想要的，那么会发生什么。

Fiddle

Answer 1

将if(i >= images.length){替换为if(i >= 0){

Answer 2

在这里试试这个有效。

所做的更改：

var i = -1;



$("#next").on("click", function(){
    if(i <images.length - 1){
        $("#result").children("p").remove();
        i=i+1;
        $("#result").append("<p>" +images[i] +"</p>");
    }
})

$("#prev").on("click", function(){
    if(i > 0){
        $("#result").children("p").remove();
        i=i-1;
        $("#result").append("<p>" +images[i] +"</p>");
    }
})

Fiddle

为什么我可以逐步完成我的阵列，但不能倒退？

2 个答案: