使用javascript / jQuery更改类的background-color属性 [英] Changing background-color property of a class with javascript/jQuery
问题描述
这似乎是一个简单的问题，但没有什么是固定它。我试图动态改变背景颜色（从白色或粉红色到绿色）在一些文本与javascript / jQuery，但由于某些原因，它不工作。文本用称为.novice的CSS类样式化。
这里是CSS。这很简单。我也尝试完全删除背景颜色，因此它没有设置背景颜色。
< style type =text / css>
.novice {
background-color：pink;
}
< / style>
这里是一个数组，我写了一个循环。第一个项目具有类新手
var achievements = ['< span class =novice> 10个以上的猜测< / span>'，...]
如果为true，则应该使.novice类具有background-color：green属性，并使新手 - 10个或更多个猜测以绿色突出显示。我是积极的，我有变量timesguessed正确设置和拼写正确。然而，当时间估计大于10时，新手...仍然不会以绿色突出显示。
if（timesguessed> 10）{
$（'。novice'）。css '， '绿色'）;
}
我正在输入上述部分吗？
我也试过替换$（'。新手'）css（'background-color'，'green'）; with
$（'。novice'）。background-color（green）; ，虽然这可能是错误的。
即使我打印出另一行与所谓新修改的新手类，文本仍然不会突出显示为绿色。
document.write（'< span class =novice>新手 - 10个或更多个猜测< / span>'）
我知道原来的CSS .novice类是工作的，因为文本将以粉红色突出显示
我不知道JavaScript是不是修改CSS类，或者什么。或者也许它只是别的什么是覆盖它？
感谢您的帮助。是我是javascript / jQuery的初学者。
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< style type =text / css>
.novice {
}
< / style>
< script type =text / javascriptsrc =../ MM_JAVASCRIPT2E / MM_JAVASCRIPT2E / _js / jquery-1.6.3.min.js>< / script>
< title>号码猜测游戏< / title>
< / head>
< body>
< h1 style =text-align：center;>数字游戏< / br>尝试猜出我的号码介于0-1000之间< / h1>
< script>
// BEGIN LONG BLOCK OF CODE WITH GUESSING GAME MECHANISMS。你可以忽略这部分我认为，这部分工作。
var realnumber = prompt（'Player 1，请输入一个数字给玩家2猜测，然后交给玩家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（'请，输入数字'）;} //为什么我不需要一个else？
numbertoguess = Math.abs（numbertoguess - realnumber）;
if（numbertoguess> = 50）{
alert（Tundra cold）;
timesguessed ++;
}
else if（30 <= numbertoguess& amp; numbertoguess< 50）{
alert（cold）;
timesguessed ++;
}
else if（20 <= numbertoguess& amp; numbertoguess< 30）{
alert（warm）;
timesguessed ++;
}
else if（10 <= numbertoguess& amp; 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;>数字为'+ realnumber +'。'）;
if（timesguessed == 1）{
document.write（'< / span>< h2 style =text-align：center;> 。< / h2>'）;
} else {
document.write（'< h2 style =text-align：center;>它花了你'+次猜测+'猜测。< / h2>'）;
}
//带有游戏机制的代码的结束块
document.write（'< / br>< / br> ;'）
//下面是用循环写出的数组
var achievements = ['< span class =novice> newvice - 10个或更多的猜测< / span>青铜 - 7-10猜测'，'银'，'金'，'钛'，'铂'，'钻石'，]
var counter = 0;
while（counter< achievement.length）{
document.write（'< h2 style =text-align：center;>'+ achievements [counter] +''）;
counter ++;
}
//下面是问题
的if函数if（timesguessed> 10）{
$（'。novice'）。css '，'＃00FF00'）; //为什么这不工作？
}
document.write（'< span class =novice>新手 - 10个或更多的猜测< / span>'） //为什么这不工作？
< / script>
< / body>
< / html>
jQuery未正确包含在页面中。检查控制台会告诉你链接是否失败（也应该说 $ 未定义）。要使用Google的最新版本，请使用此链接： http：// ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js
ie更改：
< script type =text / javascriptsrc =../ MM_JAVASCRIPT2E / MM_JAVASCRIPT2E / _js / jquery -1.6.3.min.js>< / script>
到此
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js>< / script>
调用未定义对象上的方法将导致错误，并且后续代码的执行将失败。 / p>
This seems like a simple problem but nothing nothing is fixing it. I'm trying to dynamically change the background-color (from white or pink to green) on some text with javascript/jQuery but for some reason it's not working. The text is styled with a CSS class called ".novice".
Here's the CSS. It's simple. I've also tried removing background-color completely so it does not already have a set background-color.
<style type="text/css">
.novice {
background-color: pink;
}
</style>
Here is an array with items I wrote out using a loop. The first item has the class "novice"
var achievements = ['<span class="novice">novice - 10 or more guesses </span>', ...]
Below is an if statement, which if true, is supposed to make the ".novice" class have a "background-color: green" property and make "novice - 10 or more guesses" be highlighted in green. I'm positive that I have the variable timesguessed set up correctly and spelled right. However when timesguessed is greater than 10, "novice..." will still not be highlighted in green.
if (timesguessed > 10) {
$('.novice').css('background-color', 'green');
}
Am I typing this above portion right? I've also tried replacing $('.novice').css('background-color', 'green'); with $('.novice').background-color(green); , though that's probably wrong.
Even if I print out another line with the supposedly newly modified "novice" class the text will still not be highlighted in green.
document.write('<span class="novice">novice - 10 or more guesses </span>');
I know that the original CSS .novice class is working because the text will be highlighted in pink if no matter if timesguessed is greater or less than 10.
I'm not sure if the Javascript is not modifying the CSS class, or what. Or maybe it does just something else is overriding it?
Thanks for the help. Yeah I'm a beginner at 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>
jQuery is not being included in the page correctly. Checking your console will tell you if the link failed (and should also say that $ is undefined). To use the latest version from google use this link: http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js
i.e. Change this:
<script type="text/javascript" src="../MM_JAVASCRIPT2E/MM_JAVASCRIPT2E/_js/jquery-1.6.3.min.js"></script>
to this
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
Calling a method on an undefined object would cause an error, and execution of subsequent code will fail.
这篇关于使用javascript / jQuery更改类的background-color属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
