使用jquery應用不同的背景顏色

我有一個父div的div div集合，子div的動態生成，並且都具有相同的類名。使用jquery應用不同的背景顏色

我的問題是如何使用jQuery 示例代碼適用不同的背景顏色爲每一個孩子的div下面

<div id="someid"> 
    <div class="bar">...</div> 
    <div class="bar">...</div> 
    <div class="bar">...</div> 
    <div class="bar">...</div> 
    <div class="bar">...</div> 
</div>

在這裏，我要申請不同的背景顏色爲每個孩子DIV（類=「酒吧」）

在此先感謝。

來源

2010-10-11 Ra.

意味着是完全隨機的顏色嗎？ – Marko 2010-10-11 09:56:48

事情是這樣的：

var colors = ["f00", "0f0", "00f", "ff0", "0ff", "f0f"]; 

$('#someid .bar').each(function(i) { 
    $(this).css('background-color', '#'+colors[i % colors.length]); 
});

產生隨機的顏色，你可以這樣做：

function randomColor() { 
    return 'rgb('+ 
     Math.round(Math.random()*255)+', '+ 
     Math.round(Math.random()*255)+', '+ 
     Math.round(Math.random()*255)+')' 
} 

$('#someid .bar').each(function(i) { 
    $(this).css('background-color', randomColor()); 
});

演示：

http://jsbin.com/eqoyi4

來源

2010-10-11 09:58:54

我推薦一個已知的調色板，以下是我使用的一個：var colors = [「＃5179D6」，＃66CC66，＃EF2F41，＃FFC700，＃61BDF2，＃FF7900 「＃7588DD」，「＃2F5E8C」，「＃07BACE」，「＃BAE55C」，「＃BA1871」，「#FFFFCC」，「＃BDE6FC」，「＃C7C7C7」，「＃ADA8FF」，「＃2FA675」 ]'，可見這裏：http://jsfiddle.net/nick_craver/SzRee/ – 2010-10-11 10:11:40

感謝很多:) ...它的作品..... – 2010-10-12 07:40:28

$('DIV.bar').each(function(i,e){ 
$(this).css('backgroundColor','rgb('+Math.round(255/i)+','+Math.round(255/i)+','+Math.round(255/i)+')'); 
});

來源

2010-10-11 09:59:57 Floyd

rount應該是圓的，對不對？ – 2010-10-11 10:00:30

@Gaby：'數學'應該是'數學'。而且，這可以讓所有擁有課堂欄的div無論他們在哪裏，並且聲明一個它永遠不會使用的參數。然後是零分錯誤。但除*以外* * – 2010-10-11 10:00:53

@ T.J.Crowder，的確如此！ – 2010-10-11 10:01:38

問題已經回答我猜，但無論如何;如果你想（在這個例子中#ffcc33）顯示特定顏色的陰影：

$(document).ready(function() { 
    $('.bar').each(function(i) { 
     var j = $('.bar').length; 
     $(this).css('background-color', 'rgb(' + 
      Math.floor(0xff/j * (i + 1)) + ', ' + 
      Math.floor(0xcc/j * (i + 1)) + ', ' + 
      Math.floor(0x33/j * (i + 1)) + 
     ')'); 
    }); 
})

http://www.jsfiddle.net/BEcvG/

來源

2010-10-11 10:13:41

使用jquery應用不同的背景顏色

回答

相關問題