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

这是codepen！对于这个问题，如果有人想看看，我会在这里发布相关代码将类更改为元素不会更改背景颜色

displayMoves（）函数模拟simon游戏中的移动，它将.colorRedBright类添加到一个元素来照亮它，然后250ms后删除相同的类。然而，随着游戏的进展，我注意到一个bug只在最后一次闪烁的时候（仅在RED 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(); 
    } 
}

来源

2017-07-18 abhinavm93

jQuery的改变的文本？ O.o – Andreas

@Andreas请记住，您只查看230行中的一个函数。如果你看看codepen，jQuery正在被用于诸如动画等东西。 – Santi

^@Santi说了什么，还有即时学习，我的代码可能没有正确的结构.. – abhinavm93

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

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

$(document).ready(function() { 
 
\t //Monochromatic yellow BRIGHT ->#ffff33 
 
\t //Monochromatic green BRIGHT ->#00ff00 
 
\t //Monochromatic red BRIGHT \t ->#ff0000 
 
\t //Monochromatic blue BRIGHT ->#0000ff 
 

 
\t /* https://s3.amazonaws.com/freecodecamp/simonSound1.mp3, 
 
\t https://s3.amazonaws.com/freecodecamp/simonSound2.mp3, 
 
\t https://s3.amazonaws.com/freecodecamp/simonSound3.mp3, 
 
\t https://s3.amazonaws.com/freecodecamp/simonSound4.mp3. 
 
*/ 
 
\t var currentMoves; 
 
\t var playButton; 
 
\t var isStrict; 
 
\t var circles; 
 
\t var colorsAndSounds; 
 
\t var displayMovesInterval; 
 
\t var displayIndex; 
 
\t var allCircles; 
 
\t var currentIndex; 
 
\t var noHoverClasses; 
 

 
\t /*Used for error audio 
 
\t The AudioContext interface represents an audio-processing graph built from audio modules linked together, 
 
\t 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. 
 
\t You need to create an AudioContext before you do anything else, as everything happens inside a context.*/ 
 
\t var audioCtx; 
 
\t var errorOscill; 
 
\t var ramp; 
 
\t var vol; 
 
\t var errNode; 
 
\t init(); 
 
\t 
 
}); 
 

 

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

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

 
function initialiseErrorSound() { 
 
\t audioCtx = new AudioContext(); 
 
\t errorOscill = audioCtx.createOscillator(); 
 
\t ramp = 0.05; 
 
\t vol = 0.5; 
 
\t errorOscill.type = "triangle"; 
 
\t 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++) 
 
{ 
 
\t var newCircle = {}; 
 
\t newCircle["id"] = "circle"+i; 
 
\t newCircle["colorAndSound"] = colorsAndSounds[cnsKeys[i-1]]; 
 
\t circles.push(newCircle); 
 
\t 
 
} 
 

 
changeDisplay(); 
 
startGame(); 
 

 
} 
 

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

 

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

 

 
function addMove() { 
 

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

 

 
} 
 

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

 

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

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

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

 

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

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

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

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

 

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

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

 
.colorYellowNoHov { 
 
\t background-color:#e5e500; 
 
} 
 

 
.colorBrightYellow { 
 
\t background-color: #ffff33; 
 
} 
 

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

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

 

 

 
/*GREEN */ 
 

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

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

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

 
/*green BRIGHT ->#00ff00*/ 
 

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

 
.colorBrightGreen { 
 
\t background-color:#00ff00 
 
} 
 

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

 
.colorRed { 
 
\t background-color:#b20000; 
 
} 
 

 
.colorRedNoHov { 
 
\t background-color:#b20000; 
 
} 
 

 
.colorBrightRed { 
 
\t background-color:#ff0000; 
 
} 
 

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

 

 

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

 
.colorBlue { 
 
\t background-color:#000099; 
 
} 
 

 
.colorBlueNoHov { 
 
\t background-color:#000099; 
 
} 
 

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

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

 
.signature { 
 
\t position:relative; 
 
} 
 

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

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

 
.startButtonContainer { 
 
\t 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 { 
 
\t font-size:1.2em; 
 
\t text-align:center; 
 
\t line-height:100px; 
 
\t margin-top:1%; 
 
\t color:red; 
 
\t transition:opacity 1s ease-in-out; 
 
} 
 

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

 
.hoverBlue { 
 
\t color:black; 
 

 
} 
 

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

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

 
} 
 

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

 
} 
 

 
a { 
 
\t text-decoration:none; 
 
} 
 

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

 
a:hover { 
 
\t color:blue; 
 
} 
 

 
a:visited { 
 
\t color:#87CEFA; 
 
} 
 

 
a:visited:hover { 
 
\t color:blue; 
 
} 
 

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

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

 
.fa-refresh { 
 
\t 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>

来源

2017-07-18 14:44:08

@ abhinavm93不客气：）好玩的游戏！！顺便说一句，在应用可以工作的类之后，抛出'debugger;'在那里，这会停止一切，并允许你检查文档，看看发生了什么。 –

我做了一段时间的调试，我知道问题出在类，我以为我检查了课程排序，但我绝对没有，谢谢你的快速回应:) – abhinavm93

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

回答

相关问题