2012-07-05 25 views
6

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> 
+3

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

+0

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

+1

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

Respuesta

0

jQuery no está incluido en la página correctamente. Verificando su consola le dirá si el enlace falló (y también debería decir que $ no está definido). Para usar la versión más reciente de Google utilizan este enlace: http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js

es decir, cambiar esta situación:

<script type="text/javascript" src="../MM_JAVASCRIPT2E/MM_JAVASCRIPT2E/_js/jquery-1.6.3.min.js"></script> 

a este

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 

Llamar a un método en un objeto no definido causaría un error, y la ejecución del código subsiguiente fallará.

3

.css() en el código cambia el estilo de elementos que ya están en la página mediante la adición de estilos en línea a ellos - no mediante la modificación de la regla CSS.

Es posible añadir una nueva regla en tiempo de ejecución, así:

$('head').append('<style type="text/css">.novice{color:green;}</style>'); 

no soy un defensor de tales modificaciones sin embargo. Yo prefiero ver mucho css como

.novice {background-color: pink;} 
.over-ten-guesses .novice {background-color:green;} 

Después de que se puede cambiar la clase .over-ten-guesses con Javascript en cualquier elemento contenedor que tiene .novice como su descendiente.

2

Puede hacerlo en las formas siguientes PASO 1

var imageUrl= "URL OF THE IMAGE HERE"; 
    var BackgroundColor="RED"; // what ever color you want 

para los elementos con la misma clase

var elements = document.getElementsByClassName("ClassName") 
      for (var i = 0; i < elements.length; i++) { 
       elements[i].style.background=imageUrl; 
       //if you want to change bg image 
       //if you want to change bg color 
       elements[i].style.backgroundColor=BackgroundColor ; 
      } 

Para cambiar un elemento con ID

document.getElementById("ElementId").style.backgroundImage=imageUrl 
document.getElementById("ElementId").style.backgroundColor=BackgroundColor 
Cuestiones relacionadas