Điều này có vẻ như là một vấn đề đơn giản nhưng không có gì là sửa chữa nó. Tôi đang cố gắng để tự động thay đổi màu nền (từ màu trắng hoặc màu hồng sang màu xanh lá cây) trên một số văn bản với javascript/jQuery nhưng đối với một số lý do nó không hoạt động. Văn bản được tạo kiểu với một lớp CSS được gọi là ".novice".Thay đổi thuộc tính màu nền của một lớp với javascript/jQuery
Đây là CSS. Thật đơn giản. Tôi cũng đã cố gắng loại bỏ hoàn toàn màu nền để nó chưa có màu nền đã đặt.
<style type="text/css">
.novice {
background-color: pink;
}
</style>
Đây là mảng có các mục tôi đã viết bằng vòng lặp. Mục đầu tiên có lớp "người mới"
var achievements = ['<span class="novice">novice - 10 or more guesses </span>', ...]
Dưới đây là một câu lệnh if, mà nếu đúng, là nghĩa vụ phải làm cho lớp ".novice" có một 'background-color: green' bất động sản và làm cho "người mới - 10 hoặc nhiều hơn dự đoán "được đánh dấu bằng màu xanh lục. Tôi tích cực rằng tôi có biến timesguessed được thiết lập đúng và viết đúng. Tuy nhiên khi timesguessed lớn hơn 10, "novice ..." sẽ vẫn không được đánh dấu màu xanh lá cây.
if (timesguessed > 10) {
$('.novice').css('background-color', 'green');
}
Tôi có nhập đúng phần trên không? Tôi cũng đã thử thay thế $ ('. Novice'). Css ('background-color', 'green'); với $ ('. novice'). background-color (màu xanh lá cây); , mặc dù đó có thể là sai.
Thậm chí nếu tôi in ra một dòng khác với lớp "mới làm quen" được cho là mới sửa đổi, văn bản sẽ vẫn không được đánh dấu bằng màu xanh lá cây.
document.write('<span class="novice">novice - 10 or more guesses </span>');
Tôi biết rằng các lớp CSS .novice gốc đang làm việc vì các văn bản sẽ được đánh dấu bằng màu hồng nếu không có vấn đề nếu timesguessed là lớn hơn hoặc ít hơn 10
Tôi không chắc chắn nếu Javascript không sửa đổi lớp CSS hay gì. Hoặc có thể nó chỉ là một cái gì đó khác là trọng?
Cảm ơn sự giúp đỡ. Tôi là người mới bắt đầu tại 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>
Bạn đã giải thích câu hỏi của mình rất tốt và được đánh giá cao; tuy nhiên, tôi muốn biết event nào gọi câu lệnh 'if (timeguessed> 10)'. Đây có phải là hàm nhấp chuột, hàm thay đổi, hàm tải không? [Vì lợi ích của sanity, tôi đã vạch ra các nguyên tắc cốt lõi của vấn đề của bạn và thực hiện jsFiddle cho bạn.] (Http://jsfiddle.net/dRK2r/) – Ohgodwhy
Tôi muốn nói rằng không có gì sai với mã đó và chỉ điều tôi có thể nghĩ là 'if (timeguessed> 10) 'không bao giờ thực sự đánh giá đúng. Bạn có hoàn toàn chắc chắn nó không? (Chỉ cần gắn một 'alert()' vào đó để chắc chắn). Tôi cũng khuyên bạn nên thay vì thay đổi màu nền trong jQuery, thêm hoặc thay đổi lớp của phần tử và giữ tất cả kiểu dáng của bạn trong các tệp CSS. – powerbuoy
Tôi không có nó trong một chức năng. Tôi có nên không? Cảm ơn jsFiddle, thật tuyệt. Có, tôi chắc chắn rằng số lần được đánh giá cao hơn 10 vì tôi đã in lần trước cho tôi trước câu lệnh cụ thể đó. Tôi đã thêm toàn bộ mã ở trên nếu nó giúp ........ – LazerSharks