Question

如何通过点击事件一次遍历数组并按顺序显示3个值？

示例：

var array = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];

寻找结果： 1,2,3然后点击4,5,6，然后点击7,8,9。

Answer 1

只需将您的循环变量增加3而不是1：

for (var i = 0; i < array.length; i += 3) {
    console.log(array[i], array[i+1], array[i+2]);
    // or console.log(array.slice(i, 3));
}

您也可以提前Split array into chunks。

编辑：显然你不想迭代（正如你在标题中所说）。这同样适用于连续点击。保留一个计数器i，并在每次点击时将其增加3。

Answer 2

随意使用计数器并显示接下来的三个值。

var array = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
var counter = 0;
document.getElementsByTagName('button')[0].addEventListener('click', function() {
  document.body.append(array[counter++] + array[counter++] + array[counter++]);
});

<button>click</button>
<span></span>

Answer 3

如果您不介意改变原始数组，那么这是另一种解决方案。

p4 sizes

Answer 4

您可以使用一个返回当前值的函数并递增索引计数器。然后调用三次以获得下三个值。

var array = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
var curr = 0;
function nextVal(){
    if(curr<array.length)
        return array[curr++];
    else
        return '';
}

function printNextThree(){
    console.log(nextVal()+','+nextVal()+','+nextVal());
}

现在只需在点击事件中调用printNextThree()函数即可获得所需的结果。

如何一次遍历数组3？

4 个答案: