首頁猿問更改 JavaScript 中...

更改 JavaScript 中 forEach 循環的每次迭代的顏色？

JavaScript

躍然一笑 2023-12-14 16:38:22

我有一個函數可以短暫更改元素的顏色，然后將其更改回原始顏色。根據您所處的級別（這是一個益智游戲），forEach 循環會運行此函數一定次數（級別越高，次數越多）。目前，元素更改的顏色是我手動輸入到代碼中的顏色。我試圖找到一種方法來在每次 forEach 運行該函數時更改該顏色。例如，假設您在第一輪，forEach 運行了三次，該元素將閃爍紅白、紅白、紅白。我需要的是它閃爍紅白、藍白、粉白。當顏色用完時，它還需要循環回到數組的開頭。例如，在較高級別，forEach 可能會運行 6 次，因此顏色數組上的迭代必須返回到開頭一次。這是代碼：function showCircle(item, j, x) { setTimeout(function () {let x = 0;let colors = ['blue','pink','green']let color = colors[x]; var num = initArray[j]; var element = document.getElementById(num) element.classList.add(`cell-glow-${color}`) window.setTimeout(function () { element.classList.remove(`cell-glow-${color}`) }, 400); j++; x++ console.log(color) }, speed() * j);};function showEachCircle(captureUserClicks) { initArray.forEach(showCircle); }顯然，上面發生的情況是 showCircle 函數每次都會將 x 歸零，因此它會卡在第一次迭代中。但我不確定應該將這些變量放在哪里以使其正確迭代。另外，我什至還沒有開始思考如何強制數組回到開頭。有任何想法嗎？謝謝你！

查看完整描述

2 回答

慕桂英3389331

TA貢獻2036條經驗獲得超8個贊

問題是您正在覆蓋并且您正在嘗試修改傳入的x數字。j

首先，forEach 的定義有助于閱讀。

具體來說，在您傳入的函數中，showCircle是item數組的當前項，j是循環的當前索引，x是原始數組，在本例中為initArray。然后，您用覆蓋x，let x = 0并嘗試遞增j，這不會執行任何操作，因為它在使用后會遞增。

我認為您正在尋找更像這樣的東西：

// Declare these outside the loop

var x = 0;

var colors = ['blue','pink','green'];

function showCircle(num, j) {

? // Save the current value so it isn't overwritten by the loop/setTimeout combination

? let y = x;

? // Increment x

? x++;

? setTimeout(function () {

? ? // Get the color, using the modulus operator (%) to start at the beginning again

? ? var color = colors[y % colors.length];

? ? // Get the element. num is the current item in the loop from initArray

? ? var element = document.getElementById(num);

? ? // Make it glow!

? ? element.classList.add(`cell-glow-${color}`)

? ? setTimeout(function () {

? ? ? // Make it not glow...

? ? ? element.classList.remove(`cell-glow-${color}`)

? ? }, 400);

? ? console.log(color);

? ? // j is the index of num in initArray

? }, speed() * j);

};

function showEachCircle(captureUserClicks) {

? initArray.forEach(showCircle);

}

如果您不熟悉模數（或余數）運算 %符，那么當您想要循環的內容有限時（在本例中），它對于循環非常有用colors。在此示例中，有 3 種顏色：

0 % colors.length = 0

1 % colors.length = 1

2 % colors.length = 2

3 % colors.length = 0

4 % colors.length = 1

etc..

反對回復 2023-12-14

達令說

TA貢獻1821條經驗獲得超6個贊

我就是這樣做的：

為了避免x=0每次調用函數時都被執行，我們將把它放在函數之外。
為了迭代顏色數組，我們將利用模運算符：
```
 `x = (x+1)%3`
```
這將一次又一次地x++獲取值。0, 1, 2
array.forEach()將多次調用該函數，而無需等待完整的閃爍（從白色到紅色，再回到白色）完成。我們將使用遞歸來代替。完整的閃存完成后，如果需要，我們將再次調用該函數。

您可以在代碼片段中看到一個工作示例：

const initArray = [1,1,1,1,1,1];

const colors = ['red', 'green', 'blue'];

let x = 0;

let numberOfFlashes = 0;

function showCircle() {

setTimeout(()=> {

color = colors[x];

console.log(color);

setTimeout(()=> {

console.log('white');

numberOfFlashes++;

if(numberOfFlashes<initArray.length){

showCircle();

}

}, 400);

x = (x+1)%3;

}, 400);

}

showCircle();

現在你可以把你的代碼代替我的控制臺日志，你應該讓它工作

反對回復 2023-12-14

2 回答
0 關注
172 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

更改 JavaScript 中 forEach 循環的每次迭代的顏色？

更改 JavaScript 中 forEach 循環的每次迭代的顏色？

2 回答

添加回答

更改 JavaScript 中 forEach 循環的每次迭代的顏色？