Question

我有一个我一直在这里工作的游戏，它会将你点击的td更改为依赖于变量的颜色。我希望这个变量可以在两个字符串之间随机选择，要么是＆＃39; lime＆＃39;或者＆＃39; red＆＃39;我把那部分放下了。问题是将CSS应用于td，据我所知，我正确地做了，但它似乎没有用。

＆＃13;

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

＆＃13;

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;}

＆＃13;

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

＆＃13;

这有两个错误：

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

Answer 2

你在这里，改变

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

到

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

和

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

到

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

将你的间隔置于就绪状态：）

它会起作用：）

＆＃13;

$(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);
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

使用JQuery更改颜色

2 个答案: