Javascript jQuery:addClass（）和removeClass（）由于某种原因不'；行不通

我的密码在这里

//设置变量
var gameStatus=false；
var-strict=false；
var playerTurn=false；
变量颜色=['绿色'、'红色'、'黄色'、'蓝色']；
var colorsPicked=['红色'、'黄色'、'蓝色']；
var colorsClicked=[]；
风险等级=1；
var-lIndex=0；
//游戏状态函数
$（“#开始”）。单击（函数（）{
if（gameStatus==false）{
gameStatus=true；
gameStart（）；
}
});
//游戏开始功能
函数gameStart（）{
}
//更改颜色按钮
$（'.cubes'）。单击（函数（e）{
如果（playerTurn==true）{
$（e.target）.addClass（e.target.id）；
setTimeout（函数（）{
$（e.target.removeClass（e.target.id）；
}, 500);
}否则{
返回；
}
});
//随机颜色选取函数
函数randomColor（）{
var random=Math.floor（Math.random（）*4）；
colorsPicked.push（颜色[随机]）；
}
//级别开始时显示的颜色
函数showColorStart（）{
lIndex=0；
setInterval（函数（）{
如果（颜色标记[lIndex]=“绿色”）{
$（'绿色'）.addClass（'绿色'）；
}否则如果（颜色标记[lIndex]=“红色”）{
$（'红色'）.addClass（'红色'）；
}否则，如果（colorsPicked[lIndex]=“黄色”）{
$（'黄色'）.addClass（'黄色'）；
}否则，如果（colorsPicked[lIndex]=“蓝色”）{
$（'蓝色'）.addClass（'蓝色'）；
}
setTimeout（函数（）{
$（'绿色'）.removeClass（'绿色'）；
$（'红色'）.removeClass（'红色'）；
$（'黄色'）.removeClass（'黄色'）；
$（'蓝色'）.removeClass（'蓝色'）；
}, 1000);
if（lIndex==colorsPicked.length）{
clearInterval（）；
}
}, 500);
lIndex++；
}
showColorStart（）




nvm，我得到了答案，我的lindex++超出了区间函数。
ty
我知道您已经解决了问题，但您可能希望知道
showColorStart（）
将大大简化

递归避免了对有点麻烦的
setInterval（）
的需要

function showColorStart(i) {
    var color = colorsPicked[i];
    if(!color) return;
    $('#' + color).addClass(color); // much more concise than if()...else...else...
    setTimeout(function() {
        $('#' + color).removeClass(color);
        showColorStart(i + 1); // recursive call to showColorStart()
    }, 1000);
}

以下是工作解决方案：


//设置变量
var gameStatus=false；
var-strict=false；
var playerTurn=false；
变量颜色=['绿色'、'红色'、'黄色'、'蓝色']；
var colorsPicked=['红色'、'黄色'、'蓝色']；
var colorsClicked=[]；
风险等级=1；
var-lIndex=0；
//游戏状态函数
$（“#开始”）。单击（函数（）{
if（gameStatus==false）{
gameStatus=true；
gameStart（）；
}
});
//游戏开始功能
函数gameStart（）{
}
//更改颜色按钮
$（'.cubes'）。单击（函数（e）{
如果（playerTurn==true）{
$（e.target）.addClass（e.target.id）；
setTimeout（函数（）{
$（e.target.removeClass（e.target.id）；
}, 500);
}否则{
返回；
}
});
//随机颜色选取函数
函数randomColor（）{
var random=Math.floor（Math.random（）*4）；
colorsPicked.push（颜色[随机]）；
}
//级别开始时显示的颜色
函数showColorStart（）{
lIndex=0；
setInterval（函数（）{
如果（颜色标记[lIndex]=“绿色”）{
$（'绿色'）.addClass（'绿色'）；
}否则如果（颜色标记[lIndex]=“红色”）{
$（'红色'）.addClass（'红色'）；
}否则，如果（colorsPicked[lIndex]=“黄色”）{
$（'黄色'）.addClass（'黄色'）；
}否则，如果（colorsPicked[lIndex]=“蓝色”）{
$（'蓝色'）.addClass（'蓝色'）；
}
setTimeout（函数（）{
$（'绿色'）.removeClass（'绿色'）；
$（'红色'）.removeClass（'红色'）；
$（'黄色'）.removeClass（'黄色'）；
$（'蓝色'）.removeClass（'蓝色'）；
}, 2500);
if（lIndex==colorsPicked.length）{
clearInterval（）；
}
lIndex++；
}, 500);
}
showColorStart（）
@导入url（'https://fonts.googleapis.com/css?family=Orbitron');
身体{
背景色：#000；
保证金：0；
填充：0；
}
.集装箱{
保证金：0自动；
文本对齐：居中；
填充：20px；
}
.菜单{
边缘底部：20px；
}
.展示{
宽度：130px；
高度：40px；
背景色:#282828 ;；
保证金：0自动；
文本对齐：居中；
字体系列：Orbitron，无衬线；
}
桌子{
保证金：0自动；
}
.立方体{
宽度：150px；
高度：150像素；
}
#绿色的{
边框：2倍纯绿；
右边框：2倍纯红；
}
#红色的{
边框：2倍纯红；
底部边框：2件纯蓝；
}
#黄色的{
边框：2倍纯黄色；
}
#蓝色的{
边框：2件纯蓝；
}
格林先生{
背景颜色：绿色；
}
瑞德先生{
背景色：红色；
}
黄先生{
背景颜色：黄色；
}
蓝先生{
背景颜色：蓝色；
}
#disp{
字体大小：12px；
颜色：#000；
填充：8px；
}




请在此处添加代码，而不是您的
lIndex++
不在
setInterval
函数的范围内，因此，它只会是1-您可能还需要重新考虑间隔。。。500，setTimeout为1000，你会得到一个重叠的颜色。我为你做了格式化和代码片段，请仔细检查。我运行了你的代码片段，你的
函数gameStart（）{}
似乎没有任何内容。因此，单击“开始”按钮没有任何作用。我很高兴你明白了though@KazRodgers我知道，我把这个函数留到以后。