クラスを要素に変更しても、背景色は変更されません

これはcodepenです！問題誰かが見てみたいならば、私はここにクラスを要素に変更しても、背景色は変更されません

関連するコードを投稿しますここに示すdisplayMoves（）関数は、サイモンゲームに移動をシミュレートするために、それを照明する要素に.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(); 
    } 
}

出典

2017-07-18 abhinavm93

jQueryのテキストのみを変更しますか？ O.o – Andreas

@アンドレアスあなたは230行のうち1つの機能しか見ていないことに注意してください。あなたがcodepenを見れば、jQueryはアニメーションなどのようなもののためにかなり使用されています。 – Santi

^@サンティは何を言っていますか、私のコードは正しく構造化されていないかもしれません。 – abhinavm93

あなたのCSSのオーダーです。点滅すると.colorBrightRedと.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あなたは大歓迎です：）楽しいゲーム！！ btw、 'debugger;を投げてください。クラスを適用した後、すべてを停止してドキュメントを検査し、何が起きているのかを確認することができます。 –

私はしばらくそれをデバッグしました、問題はクラスと知っていた、私はクラスの順序をチェックしたと思ったが、私は間違いなく、迅速な応答ありがとう:) – abhinavm93

クラスを要素に変更しても、背景色は変更されません

答えて

関連する問題