Question

我试图创建一个每个循环，它将查看系列中的每个div，并将div的背景颜色附加到文本中。它对第一个项目正常工作，但为每个后续元素返回rgba（0,0,0,0）。有问题的jquery如下，示例代码为：http://codepen.io/cvasquez/pen/RomWQw

$('.color-block').each(function(){
  var colorRgb = $(this).css('background-color');
  $(this).append('</br>' + colorRgb);
});

Answer 1

试试，这个：

setTimeout(function($this){
  var colorRgb = $this.css('backgroundColor');
  $this.append('</br>' + colorRgb);
}, 100, $this)

完整代码：

// var colors = ['purple', 'blue','teal', 'green','yellow','coral','red','gray'];
var colors = ['red', 'coral','yellow','green','teal','blue','purple','gray'];
var sizes = ['50','100','200','300','400','500','600','700','800'];

$(document).ready(function(){
  $('#palette').empty();
  $.each(sizes, function(i, val){
    $('#starter').append('<div data-step="' + val + '" class="color-block"></div>')
  });
  $.each(colors, function(i, val){
    $('#starter').clone().prop('id', val).appendTo('#palettes');
    $('#' + val + ' .color-block').data('color', val);
  });
  $('#starter').remove();
  
  $('.color-block').each(function(){
    var $this = $(this),
        step = $this.data('step'),
        colorName = $this.data('color');
    
    $this.addClass('bg-' + colorName + '-' + step);
    $this.append('bg-' + colorName + '-' + step);
    
    setTimeout(function($this){
      var colorRgb = $this.css('backgroundColor');
      $this.append('</br>' + colorRgb);
    }, 100, $this)
   
  });
});

html, body {
  font-family: arial, sans-serif;
  font-size: 14px;
  height: 100%;
  margin: 0;
  width: 100%;
}

#palettes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  position: relative;
  width: 100%;
}

.palette {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.color-block {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 20px;
  -webkit-transition-duration: .5s;
          transition-duration: .5s;
}

.bg-purple-50 {
  background: #efe7fe;
}

.bg-purple-100 {
  background: #c19ff9;
}

.bg-purple-200 {
  background: #a16ff6;
}

.bg-purple-300 {
  background: #823ff3;
}

.bg-purple-400 {
  background: #630ff0;
}

.bg-purple-500 {
  background: #4f0cc0;
}

.bg-purple-600 {
  background: #3b0990;
}

.bg-purple-700 {
  background: #280660;
}

.bg-purple-800 {
  background: #140330;
}

.bg-blue-50 {
  background: #e7f5fe;
}

.bg-blue-100 {
  background: #9fd6f9;
}

.bg-blue-200 {
  background: #6fc2f6;
}

.bg-blue-300 {
  background: #3fadf3;
}

.bg-blue-400 {
  background: #0f99f0;
}

.bg-blue-500 {
  background: #0c7ac0;
}

.bg-blue-600 {
  background: #095c90;
}

.bg-blue-700 {
  background: #063d60;
}

.bg-blue-800 {
  background: #031f30;
}

.bg-teal-50 {
  background: #e7fcfe;
}

.bg-teal-100 {
  background: #9ff4f9;
}

.bg-teal-200 {
  background: #6feff6;
}

.bg-teal-300 {
  background: #3fe9f3;
}

.bg-teal-400 {
  background: #0fe4f0;
}

.bg-teal-500 {
  background: #0cb6c0;
}

.bg-teal-600 {
  background: #098990;
}

.bg-teal-700 {
  background: #065b60;
}

.bg-teal-800 {
  background: #032e30;
}

.bg-green-50 {
  background: #ebf9f2;
}

.bg-green-100 {
  background: #b0e9ca;
}

.bg-green-200 {
  background: #88ddb0;
}

.bg-green-300 {
  background: #60d295;
}

.bg-green-400 {
  background: #38c77b;
}

.bg-green-500 {
  background: #2d9f62;
}

.bg-green-600 {
  background: #22774a;
}

.bg-green-700 {
  background: #175031;
}

.bg-green-800 {
  background: #0b2819;
}

.bg-yellow-50 {
  background: #fff3db;
}

.bg-yellow-100 {
  background: #ffdb8e;
}

.bg-yellow-200 {
  background: #ffcb5b;
}

.bg-yellow-300 {
  background: #ffbb28;
}

.bg-yellow-400 {
  background: #f4a700;
}

.bg-yellow-500 {
  background: #c18400;
}

.bg-yellow-600 {
  background: #8e6100;
}

.bg-yellow-700 {
  background: #5b3e00;
}

.bg-yellow-800 {
  background: #281b00;
}

.bg-coral-50 {
  background: #feede7;
}

.bg-coral-100 {
  background: #f9b69f;
}

.bg-coral-200 {
  background: #f6926f;
}

.bg-coral-300 {
  background: #f36d3f;
}

.bg-coral-400 {
  background: #f0490f;
}

.bg-coral-500 {
  background: #c03a0c;
}

.bg-coral-600 {
  background: #902c09;
}

.bg-coral-700 {
  background: #601d06;
}

.bg-coral-800 {
  background: #300f03;
}

.bg-red-50 {
  background: #fceff0;
}

.bg-red-100 {
  background: #f1aeb0;
}

.bg-red-200 {
  background: #e98385;
}

.bg-red-300 {
  background: #e1585b;
}

.bg-red-400 {
  background: #d92d30;
}

.bg-red-500 {
  background: #b32023;
}

.bg-red-600 {
  background: #88181b;
}

.bg-red-700 {
  background: #5c1112;
}

.bg-red-800 {
  background: #31090a;
}

.bg-gray-50 {
  background: #f0f3f5;
}

.bg-gray-100 {
  background: #c3ced5;
}

.bg-gray-200 {
  background: #a5b6c0;
}

.bg-gray-300 {
  background: #879dab;
}

.bg-gray-400 {
  background: #698596;
}

.bg-gray-500 {
  background: #546a78;
}

.bg-gray-600 {
  background: #3f505a;
}

.bg-gray-700 {
  background: #2a353c;
}

.bg-gray-800 {
  background: #151b1e;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="palettes">
  <div class="palette" id="starter">
  </div>
</div>

为什么jQuery css。（backgroundColor）返回rgba（0,0,0,0）？

1 个答案: