使用JQuery更改顏色

Question

我在這里一直在開發一款游戲，它將您單擊的td更改為取決於變量的顏色。 我希望在兩個字符串（“石灰”或“紅色”）之間隨機選擇此變量，我將該部分放下。 問題是，將CSS應用於td ，據我所知，我做得正確，但是似乎不起作用。

 $().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> 

這有兩件事是錯誤的：

• $(this).css('background-color:'+color); 沒有改變背景顏色
• $(this).css('color:'+color); 沒有改變文字顏色

謝謝您的幫助！

Answer 1

不太正確：

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

上面的內容，顯然是假定color變量已成功設置為有效的CSS顏色字符串。

似乎您正在嘗試將字符串傳遞給style屬性； 相反， css()方法提供了兩種方法，即'property','value' ：

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

或具有屬性值的對象：

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

參考文獻：

• CSS：
  • 基本顏色關鍵字 。
  • 擴展顏色關鍵字 。
• jQuery的：
  • css() 。

Answer 2

在這里，改變

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

至

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

和

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

至

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

將您的時間間隔置於就緒狀態:)

它將起作用:)

 $(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>