Javascript 将类更改为元素不会'；不要改变背景色

这是最棒的！对于这个问题，如果有人想看一下，我将在这里发布相关代码

这里显示的displayMoves（）函数模拟simon游戏中的移动，它向元素添加.colorRedBright类以照亮它，然后在250ms后删除相同的类。然而，随着游戏的进行，我注意到了一个bug，div只在最后一次闪烁（只有红色）。我注意到该类重写了background color属性（.redColorHover），但是其他div可以很好地处理这个问题，在调试之后我无法解决这个问题

function displayMoves() {
  var currentCircle = {},
    currentAudio, renderCircle;
  var colorBright, colorDark;
  currentCircle = circles[currentMoves[displayIndex]];
  currentAudio = document.getElementById(currentCircle["colorAndSound"][2]);
  colorBright = currentCircle["colorAndSound"][1];
  colorDark = currentCircle["colorAndSound"][0];
  renderCircle = document.getElementById(currentCircle.id);
  renderCircle.classList.add(colorBright);
  setTimeout(function() {
    renderCircle.classList.remove(colorBright);
  }, 250);
  currentAudio.play();
  displayIndex++;
  if (displayIndex == currentMoves.length) {
    clearInterval(displayMovesInterval);
    $(".header").text("Level " + currentMoves.length);
    unlockGame();
  }
}

---

这是CSS的顺序。当元素闪烁时，将

.colorBrightRed

和

.colorRedNoHov

添加到元素中，对于红色，

.colorRedNoHov

在

之后，因此它将覆盖样式。只需将
.colorRedNoHov
移动到
.colorrightred
之前，这样
.colorrightred
将覆盖
.colorRedNoHov



$（文档）.ready（函数（）{
//单色黄色亮->ffff33
//单色绿色亮->00ff00
//单色红亮->ff0000
//单色蓝亮->0000ff
/* https://s3.amazonaws.com/freecodecamp/simonSound1.mp3,
https://s3.amazonaws.com/freecodecamp/simonSound2.mp3,
https://s3.amazonaws.com/freecodecamp/simonSound3.mp3,
https://s3.amazonaws.com/freecodecamp/simonSound4.mp3.
*/
无功电流；
var播放按钮；
var isStrict；
var圈；
颜色和声音；
var显示移动到电信；
var指数；
var allCircles；
var电流指数；
变量类；
/*用于错误音频
AudioContext接口表示从链接在一起的音频模块构建的音频处理图，
每个都由一个AudioNode表示。音频上下文控制节点的创建
它包含和执行音频处理或解码。
在做任何其他事情之前，您需要创建一个音频上下文，因为所有事情都发生在上下文中*/
var-audioCtx；
var-errorOscill；
var斜坡；
var-vol；
var-errNode；
init（）；
});
函数init（）{
playButton=document.getElementById（“playButton”）；
isStrict=假；
noHoverClasses=[“colorYellowNoHov”、“colorGreenNoHov”、“colorRedNoHov”、“colorBlueNoHov”]；
颜色和声音={
“黄色”：[“colorYellow”、“colorBrightYellow”、“audio1”]，
“绿色”：[“colorGreen”、“colorBrightGreen”、“audio2”]，
“红色”：[“colorRed”、“colorBrightRed”、“audio3”]，
“蓝色”：[“colorBlue”、“colorBrightBlue”、“audio4”]
};
playButton.onclick=initialiseGame；
initialiseErrorSound（）；
}
函数initialiseErrorSound（）{
audioCtx=新的AudioContext（）；
ErrorOSChill=audioCtx.CreateSocator（）；
斜率=0.05；
vol=0.5；
errorOscill.type=“三角形”；
errorOscill.frequency.value=“110”；
errorOscill.start（0.0）；//在Safari上必须使用delay可选参数
errNode=audioCtx.createGain（）；
errorOscill.connect（errNode）；
errNode.gain.value=0；
errNode.connect（audioCtx.destination）；
}
函数playError（）{
errNode.gain.LINERRAMPTOVALUEATTIME（音量，音频CTX.currentTime+斜坡）；
}
函数stopError（）{
errNode.gain.LINERRAMPTOVALUEATTIME（0，audioCtx.currentTime+ramp）；
}
函数initialiseGame（）{
currentMoves=[]；
currentIndex=0；
圆圈=[]；
isStrict=document.getElementById（“严格”）。已选中；
//为各个圆圈设置初始颜色和声音，
//在DOM中绑定它们的ID。
var cnsKeys=Object.keys（colorsAndSounds）；
对于（变量i=1；i#00ff00*/
.colorGreen:悬停{
光标：指针；
背景色：#00ff00；
}
.colorBrightGreen{
背景色：#00ff00
}
/*红色*/
#圆圈3{
位置：绝对位置；
左：0；
}
.红色{
背景色：#b20000；
}
colorRedNoHov先生{
背景色：#b20000；
}
.鲜艳的红色{
背景色：#ff0000；
}
/*红色明亮->ff0000*/
.红色：悬停{
光标：指针；
背景色：#ff0000；
}
/*蓝色*/
#圆圈4{
底部：0；
左：10vw；
}
.colorBlue{
背景色：#000099；
}
colorBlueNoHov先生{
背景色：#000099；
}
.明亮的蓝色{
背景色：#0000ff；
}
/*蓝亮->#0000ff*/
.colorBlue:悬停{
光标：指针；
背景色：#0000ff；
}
.签名{
位置：相对位置；
}
.标题{
位置：绝对位置；
左：0；
文本对齐：居中；
字号：5em；
高度：150像素；
右：0；
保证金：0自动；
}
.开始按钮{
边界半径：10%；
字号：2.5em；
填充：1%；
证明内容：中心；
显示：内联块；
}
.startButtonContainer{
文本对齐：居中；
}
.开关{
位置：相对位置；
显示：内联块；
宽度：60px；
高度：34px；
}
.开关输入{显示：无；}
.滑块{
位置：绝对位置；
光标：指针；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ccc；
-webkit转换：.4s；
过渡：.4s；
}
.滑块：之前{
位置：绝对位置；
内容：“；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景色：白色；
-webkit转换：.4s；
过渡：.4s；
}
输入：选中+滑块{
背景色：红色；
}
输入：焦点+.滑块{
方框阴影：0 1px红色；
}
输入：选中+。滑块：之前{
-webkit转换：translateX（26px）；
-ms变换：translateX（26px）；
转化：translateX（26px）；
}
/*圆形滑块*/
.圆滑{
边界半径：34px；
}
.滑块.圆形：之前{
边界半径：50%；
}
#严格的{
字体大小：1.2米；
文本对齐：居中；
线高：100px；
利润率最高：1%；
颜色：红色；
过渡：不透明度1s缓进缓出；
}
A.足球圈{
字号：2em；
颜色：白色；
}
.哈弗蓝{
颜色：黑色；
}
.悬停蓝：悬停{
颜色：蓝色；
光标：指针；
}
.fa游戏圈：悬停{
颜色：蓝色；
光标：指针；
}
.fa游戏圈：聚焦{
字号：1em；
颜色：蓝色；
光标：指针；
}
a{
文字装饰：无；
}
a{
字体大小：1.2米；
颜色：白色；
文字装饰：无；
}
a:悬停{
颜色：蓝色；
}