如何更改此網格上各個方塊的顏色...？

我正在製作一個遊戲，用戶必須圍繞網格移動角色並收集乘客。我設法使用一些CSS和jQuery來構建這個網格，但是我需要改變網格中各個方塊的顏色，因爲我需要包含三種類型的地形。如何更改此網格上各個方塊的顏色...？

目前，我一直保持這一切在一個文件中：

<!DOCTYPE html> 
<html> 
<head> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<meta charset=utf-8 /> 
<title>BotMod</title> 
<style> 
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; } 

    ul{list-style:none;} 
    a{text-decoration:none;} 


    #grid{ 
    width:500px; 
    height:500px; 
    background:#eee; 
    padding:10px; 
    border-radius:10px; 
    } 

    .box{ 
    font-size:10px; 
    text-align:center; 
    float:left; 
    width:40px; 
    height:40px; 
    background:#fff; 
    border-radius:6px; 
    margin:4px; 
    border:1px solid #aaa; 
    } 

</style> 

<style id="jsbin-css"> 

</style> 
</head> 
<body> 



<div id="grid"></div> 



<script> 
var boxX = 0; 
var boxY = 0; 
var box = '<div class="box" />'; 

for (var i = 0; i < 100; i ++){ 
    $('#grid').append(box); 
} 

</script> 
</body> 
</html>

所以我問什麼我怎麼可以改變每平方米的顏色我選擇的顏色？如果任何人可以顯示任何代碼示例，這些代碼示例將非常有用，因爲我仍在學習JavaScript和jQuery。

來源

2014-03-28 Matt Kent

添加班級或第n個孩子或內聯樣式....玩得開心。 – epascarello

的「EQ（）」 - 選擇將幫助你在這裏：

如果你想在你的網格中的第二個框，你可以簡單地添加「：EQ（2）」您的選擇：

$('#grid .box:eq(2)').css('background', '#f00');

來源

2014-03-28 19:27:14 nils

謝謝你的工作很好，我沒有意識到這將是如此簡單:) –

不客氣！如果這個答案符合你的需求，考慮將其標記爲接受:) – nils

如何更改此網格上各個方塊的顏色...？

回答

相關問題