使用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()。

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>