將3種不同的背景顏色三米的div使用JQuery

同一類

可能重複：
Apply different background color using jquery 將3種不同的背景顏色三米的div使用JQuery

我在頁面上有三個div的所有類別。接觸圖像

我期待這些三個div有不同的背景顏色（青色，黃色，洋紅色） - 理想的rgb顏色，透明度爲50％。他們不需要隨機選擇 - 具有以下條件很好。一（品紅）二（青色）三（黃色）

我是一個新手，jQuery和迄今已得到了回答這個代碼在這裏稍微類似的問題。

$(function() { 
$(".contact-image").each(function() { 
    var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')'; 
    $(this).css("background-color", hue); 
});

}）;

這使所有3個div隨機顏色不同，但我沒有知識來根據我的需要進行調整。任何幫助將是非常讚賞..

來源

2013-01-18 lsloss

爲什麼不使用CSS背景呢？如果你不使用隨機背景顏色...... – Mooseman

只需爲CSS中的每個div添加一個類。沒有理由使用JavaScript/jQuery –

請參閱http://stackoverflow.com/questions/3905145/apply-different-background-color-using-jquery –

可以使用功能二傳手語法：

$(".contact-image").css("background-color", function(i) { 
    return ["magenta", "cyan", "yellow"][i]; // one of the three 
});

來源

2013-01-18 16:29:28 pimvdb

非常感謝你這個pimvdb！多麼傳奇，這正是我想要的結果。感謝所有人的答案。 – lsloss

$(function() { 
    var colors = ['magenta', 'cyan', 'yellow']; 
    $(".contact-image").each(function(i) { 
     $(this).css("background-color", colors[i]); 
    }) 
});

來源

2013-01-18 16:31:23

這在性能上在技術上更好，因爲它不會爲每次迭代創建新的數組。 –

@PaulKarabilo我認爲'.each'只能用數組來處理，而不能用於對象選擇：http://api.jquery.com/jQuery.each/ – paul

@paul [jQuery.each]（http：/ /api.jquery.com/jQuery.each/）是一個通用的迭代函數; [jQuery.fn.each]（http://api.jquery.com/each/）（又名'$（）。each'，這裏使用的）遍歷jQuery對象中包含的元素。 –

一種方式做到這一點，這樣就可以通過設置十六進制值的顏色在自己的div ：

HTML：

<div class="contact-image" data-color="ffffff"> 
    Content 1 
</div> 
<div class="contact-image" data-color="ff0000"> 
    Content 2 
</div> 
<div class="contact-image" data-color="000000"> 
    Content 3 
</div>

JQuery的：

$(function() { 
    $(".contact-image").each(function() { 
     var hue = "#"+$(this).data('color'); 
     $(this).css("background-color", hue); 
    }); 
});

來源

2013-01-18 16:32:14 Samsquanch

將3種不同的背景顏色三米的div使用JQuery

回答

相關問題