javascript - 使用 JQuery 改变颜色

Question

我在这里开发了一款游戏，它会将您点击的 td 更改为取决于变量的颜色。我希望这个变量在两个字符串之间随机选择，'lime' 或 'red' 我把那部分记下来了。问题是将 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:
  • > Basic Color keywords .
  • > Extended Color keywords .
• jQuery:
  • > css() .