将类更改为元素不会更改背景颜色

Question

这是codepen！对于这个问题，如果有人想看看，我会在这里发布相关代码

此处显示的displayMoves（）函数模拟simon游戏中的移动，它将.colorRedBright类添加到元素以照亮它，然后在250ms后删除相同的类。然而，随着游戏的进行，我注意到一个错误，即div仅在最后一次（仅限红色）时闪烁。我注意到该类覆盖了背景颜色属性（。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();
  }
}

Answer 1

这是你的CSS的顺序。您在元素闪烁时添加.colorBrightRed和.colorRedNoHov，对于红色，.colorRedNoHov在.colorBrightRed之后，因此它会覆盖样式。只需在.colorRedNoHov之前移动.colorBrightRed，这样.colorBrightRed会在两个类都应用于元素时覆盖.colorRedNoHov。

https://codepen.io/mcoker/pen/mwYQgx

$(document).ready(function() {
	//Monochromatic yellow BRIGHT ->#ffff33
	//Monochromatic green  BRIGHT ->#00ff00
	//Monochromatic red BRIGHT 	  ->#ff0000
	//Monochromatic blue BRIGHT   ->#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 currentMoves;
	var playButton;
	var isStrict;
	var circles;
	var colorsAndSounds;
	var displayMovesInterval;
	var displayIndex;
	var allCircles;
	var currentIndex;
	var noHoverClasses;

	/*Used for error audio
	The AudioContext interface represents an audio-processing graph built from audio modules linked together,
	each represented by an AudioNode. An audio context controls both the creation of the nodes
    it contains and the execution of the audio processing, or decoding.
	You need to create an AudioContext before you do anything else, as everything happens inside a context.*/
	var audioCtx;
	var errorOscill;
	var ramp;
	var vol;
	var errNode;
	init();
	
});


function init() {
	
	playButton = document.getElementById("playButton");
	isStrict = false;
	noHoverClasses = ["colorYellowNoHov","colorGreenNoHov","colorRedNoHov","colorBlueNoHov"];

	colorsAndSounds = {
		"yellow":["colorYellow","colorBrightYellow","audio1"],
		"green":["colorGreen","colorBrightGreen","audio2"],
		"red":["colorRed","colorBrightRed","audio3"],
		"blue":["colorBlue","colorBrightBlue","audio4"]
	};
	playButton.onclick = initialiseGame;
    initialiseErrorSound();
}

function initialiseErrorSound() {
	audioCtx = new AudioContext();
	errorOscill =  audioCtx.createOscillator();
	ramp = 0.05;
	vol = 0.5;
	errorOscill.type = "triangle";
	errorOscill.frequency.value = "110";
    errorOscill.start(0.0); //delay optional parameter is mandatory on Safari
    errNode = audioCtx.createGain();
    errorOscill.connect(errNode);
    errNode.gain.value = 0;
    errNode.connect(audioCtx.destination);
}


function playError() {
  errNode.gain.linearRampToValueAtTime(vol, audioCtx.currentTime + ramp);
}

function stopError() {
  errNode.gain.linearRampToValueAtTime(0, audioCtx.currentTime + ramp);
}
 

function initialiseGame() {
currentMoves = [];
currentIndex = 0;
circles = [];
isStrict = document.getElementById("strict").checked;
//Set initial colors and sounds for various circles, 
//Bind their ids in the DOM.
var cnsKeys = Object.keys(colorsAndSounds);
for(var i =1;i<=4;i++)
{
	var newCircle = {};
	newCircle["id"] = "circle"+i;
	newCircle["colorAndSound"] = colorsAndSounds[cnsKeys[i-1]];
	circles.push(newCircle);
	
}

changeDisplay();
startGame();

}

function changeDisplay() {
	playButton.className = "fa fa-refresh hoverBlue fa-2x";
	$(".header").animate({left: '-=5200px'});
		setTimeout(function() {
		 		$(".header").text("Level "+currentMoves.length);
		 },500);
	$(".header").css("font-size",'2.5em');
	$(".header").animate({left: '+=5200px'});
	$("#strictAndNotif ").hide();
		
}


function startGame() {
addMove();
playGame();
}


function addMove() {

var randomMove = Math.floor(Math.random()*4);
currentMoves.push(randomMove);


}

function playGame () {
	//Initialise value of displayIndex for changing css and playing sound.
	lockGame();
	displayIndex = 0; ""
	displayMovesInterval = setInterval(displayMoves ,1000);
}


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

function lockGame() {
	var i= 0;
	allCircles = document.querySelectorAll(".circle");
    allCircles.forEach(function(circle) {
    	circle.onclick = "";
    	circle.classList.remove(circles[i]["colorAndSound"][0]);
    	circle.classList.add(noHoverClasses[i]);
    	i++;
    })
    
}

function unlockGame() {
	var i =0;
    allCircles = document.querySelectorAll(".circle");
    allCircles.forEach(function(circle) {
    	circle.onclick = moveClicked;
    	circle.classList.remove(noHoverClasses[i]);
    	circle.classList.add(circles[i]["colorAndSound"][0]);
    	circle.classList.remove(noHoverClasses[i]);
    	i++;
    })
}


function moveClicked() {
	var divClicked = this.id;
	var circleDiv = circles[currentMoves[currentIndex]];
	var supposedToClick =  circleDiv.id;
	var soundToPlay;
	if(supposedToClick == divClicked)
	{
	console.log("Great success!");
	soundToPlay	= document.getElementById(circleDiv["colorAndSound"][2]);
	soundToPlay.play();
	currentIndex++;
	if(currentIndex==currentMoves.length)
	{
		//20th level win condition
		if(currentIndex == 20)
		{
		setTimeout(initialiseGame,5000);
		$(".header").text("You win! Reset in 5 seconds! ");
		shake();
		}
		else {
		addMove();
		currentIndex = 0;
		playGame();
		}
	}
	}
	else
	{
		
		shake();
		currentIndex = 0;
		playError();
		setTimeout(stopError,250);
		if(isStrict)
		setTimeout(initialiseGame,1100);
		else
		playGame();
	}
	
}

function shake () {
	$(".header").animate({left: '-=50px'},250);
	$(".header").animate({left: '+=50px'},250);
	$(".header").animate({left: '-=50px'},250);
	$(".header").animate({left: '+=50px'},250);
}

body{
	font-family: 'Rajdhani',sans-serif;
	background-color:black;
	color:white;
} 

.circle {
	position:relative;
	height:10vw;
	width:10vw;
	border-radius:50%;
}


#content {
	position:absolute;
	display:inline-block;
	left:40vw;
	width:20vw;
	margin-top:1%;
}

/* YELLOW*/
.colorYellow {
	background-color: #e5e500;
}

.colorYellowNoHov {
	background-color:#e5e500;
}

.colorBrightYellow {
	background-color: #ffff33;
}

#circle1 {
	position:absolute;
	left:0;
}

/* BRIGHT YELLOW */
.colorYellow:hover {
	cursor:pointer;
	background-color:#ffff33;
}



/*GREEN */

.colorGreen {
	background-color: #00b300;
}

#circle2 {
	top:0%;
	left:10vw;
}

.colorGreenNoHov {
	background-color:#00b300;
}

 /*green  BRIGHT ->#00ff00*/

.colorGreen:hover {
	cursor:pointer;
	background-color:#00ff00;
}

.colorBrightGreen {
	background-color:#00ff00 
}

/*RED Color */
#circle3 {
	position:absolute;
	left:0;
}

.colorRed {
	background-color:#b20000;
}

.colorRedNoHov {
	background-color:#b20000;
}

.colorBrightRed {
	background-color:#ff0000;
}

/* red BRIGHT 	  ->#ff0000*/
.colorRed:hover {
	cursor:pointer;
	background-color:#ff0000;
}



/*BLUE Color */
#circle4 {
	bottom:0;
	left:10vw;
}

.colorBlue {
	background-color:#000099;
}

.colorBlueNoHov {
	background-color:#000099;
}

.colorBrightBlue {
	background-color:#0000ff;
}

/* blue BRIGHT   ->#0000ff */
.colorBlue:hover {
	cursor:pointer;
	background-color:#0000ff;
}

.signature {
	position:relative;
}

.header {
	position:absolute;
	left:0;
	text-align:center;
	font-size:5em;
	height:150px;
	right:0;
	margin:0 auto;
}

.startButton {
	border-radius:10%;
	font-size:2.5em;
	padding:1%;
	justify-content: center;
	display:inline-block;
}

.startButtonContainer {
	text-align:center;
}


.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: red;
}

input:focus + .slider {
  box-shadow: 0 0 1px red;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

#strictAndNotif {
	font-size:1.2em;
	text-align:center;
	line-height:100px;
	margin-top:1%;
	color:red;
	transition:opacity 1s ease-in-out;
}

.fa-play-circle {
	font-size:2em;
	color:white;
}

.hoverBlue {
	color:black;

}

.hoverBlue:hover {
	color:blue;
	cursor:pointer;
}

.fa-play-circle:hover {
	color:blue;
	cursor:pointer;

}

.fa-play-circle:focus {
	font-size:1em;
	color:blue;
	cursor:pointer;

}

a {
	text-decoration:none;
}

a {
	font-size:1.2em;
	color:white;
	text-decoration:none;
}

a:hover {
	color:blue;
}

a:visited {
	color:#87CEFA;
}

a:visited:hover {
	color:blue;
}

.header-container {
	height:150px;
	width:100%;
}

.fa-heart {
	color:red;
	font-size:1.2em;
}

.fa-refresh {
	color:white;
}

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Rajdhani" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="simon.css">
<script src="simon.js"></script>

</head>
<body>
<div class ="header-container">
<div class="header">SIMON</div>
<audio id="audio1"  preload="auto" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"></audio>
<audio id="audio2" preload="auto" src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"></audio>
<audio id="audio3" preload="auto" src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"></audio>
<audio id="audio4" preload="auto" src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"></audio>
</div>
<div class="startButtonContainer"><div class="startButton"><i id="playButton" class="fa fa-play-circle fa-2x" aria-hidden="true"></i></div></div>
<div id ="strictAndNotif">
<label class="switch"><input id="strict" type="checkbox">
<span class="slider round"></span>
STRICT
</label></div>
<div id = "content">
<div id = "circle1" class ="circle colorYellow"></div>
<div id = "circle2" class ="circle colorGreen"></div>
<div id = "circle3" class ="circle colorRed"></div>
<div id = "circle4" class ="circle colorBlue"></div>
<div class="signature">
<p style="text-align:center"><i class="fa fa-heart" aria-hidden="true"></i></p>
<p style="text-align:center"><a href="https://github.com/abhinav-thinktank">Abhinav Mishra</a></p>
<p style="text-align:center"><a href="https://github.com/abhinav-thinktank">अभिनव मिश्रा</a></p>
</div>
</div>

</body>
</html>