1

重複の可能性:
jquery を使用して別の背景色を適用する

ページに 3 つの div があり、すべてクラスが .contact-image です。

これらの 3 つの div に異なる背景色 (シアン、イエロー、マゼンタ) を持たせたいと考えています。理想的には、透明度が 50% の RGB カラーです。ランダムに選択する必要はありません。次のようにすれば問題ありません。1（マゼンタ） 2（シアン） 3（イエロー）

私は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自体の16進値を介して色を設定できるようにする1つの方法：

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-18T16:32:14.487 に答える