首頁(yè) 猿問(wèn) 更改 JavaScript 中...

更改 JavaScript 中 forEach 循環(huán)的每次迭代的顏色？

JavaScript

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

我有一個(gè)函數(shù)可以短暫更改元素的顏色，然后將其更改回原始顏色。根據(jù)您所處的級(jí)別（這是一個(gè)益智游戲），forEach 循環(huán)會(huì)運(yùn)行此函數(shù)一定次數(shù)（級(jí)別越高，次數(shù)越多）。目前，元素更改的顏色是我手動(dòng)輸入到代碼中的顏色。我試圖找到一種方法來(lái)在每次 forEach 運(yùn)行該函數(shù)時(shí)更改該顏色。例如，假設(shè)您在第一輪，forEach 運(yùn)行了三次，該元素將閃爍紅白、紅白、紅白。我需要的是它閃爍紅白、藍(lán)白、粉白。當(dāng)顏色用完時(shí)，它還需要循環(huán)回到數(shù)組的開頭。例如，在較高級(jí)別，forEach 可能會(huì)運(yùn)行 6 次，因此顏色數(shù)組上的迭代必須返回到開頭一次。這是代碼：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); }顯然，上面發(fā)生的情況是 showCircle 函數(shù)每次都會(huì)將 x 歸零，因此它會(huì)卡在第一次迭代中。但我不確定應(yīng)該將這些變量放在哪里以使其正確迭代。另外，我什至還沒(méi)有開始思考如何強(qiáng)制數(shù)組回到開頭。有任何想法嗎？謝謝你！

查看完整描述

2 回答

慕桂英3389331

TA貢獻(xiàn)2036條經(jīng)驗(yàn) 獲得超8個(gè)贊

問(wèn)題是您正在覆蓋并且您正在嘗試修改傳入的x數(shù)字。j

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

具體來(lái)說(shuō)，在您傳入的函數(shù)中，showCircle是item數(shù)組的當(dāng)前項(xiàng)，j是循環(huán)的當(dāng)前索引，x是原始數(shù)組，在本例中為initArray。然后，您用覆蓋x，let x = 0并嘗試遞增j，這不會(huì)執(zhí)行任何操作，因?yàn)樗谑褂煤髸?huì)遞增。

我認(rèn)為您正在尋找更像這樣的東西：

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

}

如果您不熟悉模數(shù)（或余數(shù)）運(yùn)算 %符，那么當(dāng)您想要循環(huán)的內(nèi)容有限時(shí)（在本例中），它對(duì)于循環(huán)非常有用colors。在此示例中，有 3 種顏色：

0 % colors.length = 0

1 % colors.length = 1

2 % colors.length = 2

3 % colors.length = 0

4 % colors.length = 1

etc..

反對(duì) 回復(fù) 2023-12-14

達(dá)令說(shuō)

TA貢獻(xiàn)1821條經(jīng)驗(yàn) 獲得超6個(gè)贊

我就是這樣做的：

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

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

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

現(xiàn)在你可以把你的代碼代替我的控制臺(tái)日志，你應(yīng)該讓它工作

反對(duì) 回復(fù) 2023-12-14

2 回答
0 關(guān)注
228 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

更改 JavaScript 中 forEach 循環(huán)的每次迭代的顏色？

更改 JavaScript 中 forEach 循環(huán)的每次迭代的顏色？

2 回答

添加回答