1

可能重复：
使用 jquery 应用不同的背景颜色

我在一个页面上有三个 div 都带有 .contact-image 类

我希望这三个 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 随机着色为不同的颜色，但我不知道根据我的需要进行调整。任何帮助将不胜感激..

4

3 回答 3

6

您可以使用函数设置器语法：

$(".contact-image").css("background-color", function(i) {
  return ["magenta", "cyan", "yellow"][i];  // one of the three
});
于 2013-01-18T16:29:28.063 回答
0 
$(function() {
    var colors = ['magenta', 'cyan', 'yellow'];
    $(".contact-image").each(function(i) {
        $(this).css("background-color", colors[i]);
    })
});
于 2013-01-18T16:31:23.397 回答
0

一种方法是，您可以通过 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>

查询：

$(function() {
  $(".contact-image").each(function() {
      var hue = "#"+$(this).data('color');
       $(this).css("background-color", hue);
  });
});
于 2013-01-18T16:32:14.487 回答