Esto parece un problema simple pero nada lo está solucionando. Intento cambiar dinámicamente el color de fondo (de blanco o rosa a verde) en algún texto con javascript/jQuery, pero por alguna razón no funciona. El texto está diseñado con una clase CSS llamada ".novice".Cambiar la propiedad de color de fondo de una clase con javascript/jQuery
Aquí está el CSS. Es sencillo. También intenté eliminar completamente el color de fondo, por lo que aún no tiene un color de fondo definido.
<style type="text/css">
.novice {
background-color: pink;
}
</style>
Aquí hay una matriz con elementos que escribí utilizando un bucle. El primer elemento tiene la clase "novato"
var achievements = ['<span class="novice">novice - 10 or more guesses </span>', ...]
A continuación se muestra una sentencia if, que si es cierto, se supone que la clase ".novice" tiene un 'background-color: verde' propiedad y crea "novato - 10 o más conjeturas "resaltar en verde. Estoy seguro de que tengo la variable timesguessed configurada correctamente y escrita correctamente. Sin embargo, cuando se dice que el tiempo es mayor que 10, "novato ..." aún no se resaltará en verde.
if (timesguessed > 10) {
$('.novice').css('background-color', 'green');
}
Estoy escribiendo esta parte arriba a la derecha? También he intentado reemplazar $ ('. Novice'). Css ('background-color', 'green'); con $ ('. novice'). background-color (verde); , aunque eso probablemente sea incorrecto.
Incluso si imprimo otra línea con la clase "novato" supuestamente modificada, el texto aún no se resaltará en verde.
document.write('<span class="novice">novice - 10 or more guesses </span>');
sé que la clase CSS .novice original se trabaja porque el texto se resaltará en rosa si no importa si timesguessed es mayor o menor que 10.
no estoy seguro de si el Javascript no está modificando la clase CSS, o qué. ¿O tal vez solo algo más lo está anulando?
Gracias por la ayuda. Sí, soy un principiante en javascript/jQuery.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.novice {
}
</style>
<script type="text/javascript" src="../MM_JAVASCRIPT2E/MM_JAVASCRIPT2E/_js/jquery-1.6.3.min.js"></script>
<title>Number Guessing Game</title>
</head>
<body>
<h1 style="text-align:center;"> Number Game </br> Try to guess my number that is between 0-1000 </h1>
<script>
// BEGIN LONG BLOCK OF CODE WITH GUESSING GAME MECHANISMS. You can ignore this part I think, this part works.
var realnumber = prompt('Player 1, please enter a number for Player 2 to guess then hand it off to Player 2.', '');
while (isNaN(realnumber)) {
realnumber = prompt('Player 1, please enter a NUMBER, dimwit, for Player 2 to guess.', '');}
var timesguessed=0;
while (numbertoguess != 0) {
var numbertoguess = prompt("Player 2, guess a number", "");
while (isNaN(numbertoguess)) {
numbertoguess = prompt('Please, type in a number');} // why don't I need an "else" here?
numbertoguess = Math.abs(numbertoguess - realnumber);
if (numbertoguess >= 50) {
alert("Tundra cold");
timesguessed++;
}
else if (30 <= numbertoguess && numbertoguess < 50) {
alert("cold");
timesguessed++;
}
else if (20 <= numbertoguess && numbertoguess < 30) {
alert("warm");
timesguessed++;
}
else if (10 <= numbertoguess && numbertoguess< 20) {
alert("hot");
timesguessed++;
}
else if (5 <= numbertoguess && numbertoguess < 10) {
alert("Steaming hot!");
timesguessed++;
}
else if (3 <= numbertoguess && numbertoguess < 5) {
alert("SCALDING HOT!");
timesguessed++;
}
else if (1 < numbertoguess && numbertoguess < 3) {
alert("FIRE!");
timesguessed++;
}
else if (numbertoguess == 1) {
alert("Face Melting!");
timesguessed++;
} else if (numbertoguess == 0) {
alert("BINGO!");
timesguessed++;
}
}
document.write('</br></br></br></br><h2 style="text-align:center; font-size: 18px;"> The number was ' + realnumber + '.');
if (timesguessed == 1) {
document.write('</span><h2 style="text-align:center;">It took you ' + timesguessed + ' guess.</h2>');
} else {
document.write('<h2 style="text-align:center;">It took you ' + timesguessed + ' guesses.</h2>');
}
// END LONG BLOCK OF CODE WITH GUESSING GAME MECHANISMS
document.write('</br></br>')
//below is the array written out with a loop
var achievements = ['<span class="novice">novice - 10 or more guesses </span>',bronze - 7-10 guesses', 'silver', 'gold', 'titanium', 'platinum', 'diamond', ]
var counter = 0;
while (counter < achievements.length) {
document.write('<h2 style="text-align:center;">' + achievements[counter] + ' ');
counter++;
}
//below is the "if" function of question
if (timesguessed > 10) {
$('.novice').css('background-color', '#00FF00'); //why does this not work?
}
document.write('<span class="novice">novice - 10 or more guesses </span>'); //why does this not work?
</script>
</body>
</html>
Explicaste tu pregunta muy bien y se agradece; sin embargo, me gustaría saber qué evento invoca la instrucción 'if (tiempo de recuento> 10)'. ¿Es esto una función de clic, una función de cambio, función de carga? [Por motivos de cordura, he esbozado los principios básicos de su problema e hice un jsFiddle de trabajo para usted.] (Http://jsfiddle.net/dRK2r/) – Ohgodwhy
Diría que no hay nada de malo en ese código y el único Lo que se me ocurre es que 'if (timeguessed> 10)' en realidad nunca se evalúa como verdadero. ¿Estás absolutamente seguro de que lo hace? (Simplemente pegue un 'alerta()' allí para asegurarse). También recomendaría que en lugar de cambiar el color de fondo en jQuery, agregue o cambie la clase del elemento y mantenga todo su estilo en los archivos CSS. – powerbuoy
No lo tengo en una función. ¿Debería? Gracias por el jsFiddle, es genial. Sí, estoy seguro de que el tiempo requerido es mayor que 10 porque me ha impresionado el tiempo antes de esa declaración específica de if. He agregado mi código completo arriba si ayuda ........ – LazerSharks