Modification de la propriété background-color d’une classe avec javascript / jQuery

Cela semble être un problème simple mais rien ne le résout. J’essaie de changer dynamicment la couleur d’arrière-plan (du blanc ou du rose au vert) de certains textes avec javascript / jQuery, mais pour une raison quelconque, cela ne fonctionne pas. Le texte est stylé avec une classe CSS appelée “.novice”.

Voici le CSS. C’est simple. J’ai également essayé de supprimer complètement la couleur de fond afin de ne pas avoir de couleur de fond définie.

 .novice { background-color: pink; }  

Voici un tableau avec les éléments que j’ai écrits en utilisant une boucle. Le premier élément a la classe “novice”

 var achievements = ['novice - 10 or more guesses ', ...] 

Ci-dessous, une instruction if qui, si elle est vraie, est supposée donner à la classe “.novice” une propriété “background-color: green” et faire en sorte que “novice – 10 suppositions ou plus” soit surligné en vert. Je suis persuadé que les variables variables sont correctement configurées et épelées correctement. Cependant, lorsque le temps estimé est supérieur à 10, “novice …” ne sera toujours pas surligné en vert.

 if (timesguessed > 10) { $('.novice').css('background-color', 'green'); } 

Est-ce que je tape cette partie ci-dessus, n’est-ce pas? J’ai également essayé de remplacer $ (‘. Novice’). Css (‘background-color’, ‘green’); avec $ (‘. novice’). couleur de fond (vert); , bien que ce soit probablement faux.

Même si j’imprime une autre ligne avec la classe “novice” supposément modifiée, le texte ne sera toujours pas surligné en vert.

 document.write('novice - 10 or more guesses '); 

Je sais que la classe CSS .novice originale fonctionne, car le texte sera surligné en rose si le temps passé est supérieur ou inférieur à 10.

Je ne suis pas sûr si le Javascript ne modifie pas la classe CSS, ou quoi. Ou peut-être que c’est juste que quelque chose d’autre l’emporte?

Merci pour l’aide. Oui, je suis débutant sur javascript / jQuery.

      .novice { }   Number Guessing Game   

Number Game
Try to guess my number that is between 0-1000

// 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('



The number was ' + realnumber + '.'); if (timesguessed == 1) { document.write('

It took you ' + timesguessed + ' guess.

'); } else { document.write('

It took you ' + timesguessed + ' guesses.

'); } // END LONG BLOCK OF CODE WITH GUESSING GAME MECHANISMS document.write('

') //below is the array written out with a loop var achievements = ['novice - 10 or more guesses ',bronze - 7-10 guesses', 'silver', 'gold', 'titanium', 'platinum', 'diamond', ] var counter = 0; while (counter < achievements.length) { document.write('

' + 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('novice - 10 or more guesses '); //why does this not work?

jQuery n’est pas inclus correctement dans la page. Vérifier votre console vous dira si le lien a échoué (et devrait aussi indiquer que $ est indéfini). Pour utiliser la dernière version de Google, utilisez ce lien: http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js

c’est-à-dire changer ceci:

  

pour ça

  

L’appel d’une méthode sur un object non défini provoquerait une erreur et l’exécution du code suivant échouerait.

.css() dans votre code modifie le style des éléments déjà présents sur la page en leur ajoutant des styles en ligne, et non en modifiant la règle css.

Vous pouvez append une nouvelle règle au moment de l’exécution de la manière suivante:

 $('head').append(''); 

Je ne suis cependant pas partisan de telles modifications. Je préférerais beaucoup voir css comme

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

Après cela, vous pouvez basculer la classe. Sur .over-ten-guesses avec Javascript sur tout élément conteneur ayant .novice comme descendant.

Vous pouvez le faire de différentes manières: ÉTAPE 1

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

pour les éléments de même classe

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

Pour changer un élément avec ID

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