使用JQuery更改颜色

Question

I have a game I have been working on here, that will change a td you click on to a color dependent on a variable. I want this variable to be randomly chosen between two strings, either 'lime' or 'red' I have that part down. The problem is applying the CSS to the td 's, as far as I can tell, I am doing it correctly, but it doesn't seem to work.

 $().ready(function(){ //Functions $('td').click(function(){ if($(this).hasClass('block')) return; $(this).addClass(color); $(this).addClass('block'); $(this).css('background-color:'+color); tilesLeft--; if(color=='lime'){color='red';}else{color='lime';} }); //Variables var color; var tilesLeft = 9; //Setup if(Math.round(Math.random())==0){color='lime';}else{color='red';} }); //Intervals setInterval(function(){ $('header').css('color:'+color); },1); 

 html, body { background-color:black; color:white; text-align:center; height: 100%; } td { border: 1px solid white; margin:1px; width:30%;height:30%; } #board {height:500px;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header>Tic Tac Toe</header> <table style='width:100%;height:95%;'> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> </table> 

The two things that are wrong with this are:

• The $(this).css('background-color:'+color); is not changing the background color
• The $(this).css('color:'+color); is not changing the text color

Thanks for the help!

Answer 1

Not quite right:

$(this).css('background-color', color);

The above, perhaps obviously, assumes that the the color variable is successfully set to a valid CSS color-string.

It seems you were trying to pass a string, perhaps to the style attribute; instead the css() method offers two approaches, a 'property','value' :

css('background-color', 'red');

Or an object of property-values:

css({
    'background-color' : 'red'
});

References:

• CSS:
  • Basic Color keywords .
  • Extended Color keywords .
• jQuery:
  • css() .

Answer 2

Here you are, change

$(this).css('background-color:'+color); 

to

$(this).css({
  backgroundColor: color
});

and

$('header').css('color:'+color);

to

 $('header').css({
    color: color
 });

Put your interval inside the ready state :)

And it will work :)

 $(document).ready(function() { //Functions $('td').click(function() { if ($(this).hasClass('block')) return; $(this).addClass(color); $(this).addClass('block'); $(this).css({ backgroundColor: color }); tilesLeft--; if (color == 'lime') { color = 'red'; } else { color = 'lime'; } }); //Variables var color; var tilesLeft = 9; //Setup if (Math.round(Math.random()) == 0) { color = 'lime'; } else { color = 'red'; } //Intervals setInterval(function() { $('header').css({ color: color }); }, 1); }); 

 html, body { background-color: black; color: white; text-align: center; height: 100%; } td { border: 1px solid white; margin: 1px; width: 30%; height: 30%; } #board { height: 500px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header>Tic Tac Toe</header> <table style='width:100%;height:95%;'> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>