Question

我尝试使用之前的＆＃39;来尝试循环遍历数组。和＆＃39; next＆＃39;按钮，分别穿过阵列。

它可以正常工作，直到你改变方向＆＃39;并试着说，例如＆＃39;下一个＆＃39; 然后＆＃39;以前＆＃39;

数组显示已经存在的相同元素，而不是显示数组的上一个元素。

例如，我在4岁时，点击了之前的＆＃39;按钮，它保持在4.您必须按下之前的＆＃39;按钮再次使其回到3。

我在这里想念的是什么......？

＆＃13;

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;
});

＆＃13;

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

＆＃13;

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或在索引引用之外执行操作。

您不应重新定义ifs

内的文字

var text = numbers[--i];

以下解决方案有效：

＆＃13;

	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;
	});

＆＃13;

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

＆＃13;

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

在迭代期间，循环在数组元素上停顿

3 个答案: