对每个应用结果，保持覆盖

Question

我正在使用 color-thief js 获取 div 中每个图像的颜色。我正在尝试遍历每个并检索颜色。这很好用。在我的控制台中，它显示了每张图片的颜色。

我有一些额外的代码可以将 RGB 格式的结果转换为 HEX。这在控制台中也可以正常工作。我的结果是每张图片的十六进制颜色。

当我尝试将 HEX 应用于 div 时，我总是得到最后一种颜色。

我明白发生了什么，循环不断超越自身，因此返回最后一种颜色。我只是不知道如何防止这种情况，并且在每个循环中将颜色应用于 div.

$(window).load(function() {
  var color_thief = new ColorThief();

  $('.thumbnail-image-link img').each(function() {
    var dominant_color = color_thief.getPalette(this, 2);

    // Converts RGB to HEX
    function componentToHex(c) {
      var hex = c.toString(16);
      return hex.length == 1 ? "0" + hex : hex;
    }

    function rgbToHex(r, g, b) {
      return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
    }

    var colorOne = rgbToHex(dominant_color[0][0], dominant_color[0][1], dominant_color[0][2]);
    console.log("Hex One " + colorOne);

    var colorTwo = rgbToHex(dominant_color[1][0], dominant_color[1][1], dominant_color[1][2]);
    console.log("HEX Two " + colorTwo);

    //This is where my issue is
    $(".section").css('background', colorOne);

  });
});

编辑：添加了 HTML 代码。编辑 2：取出额外的 div 以避免混淆。

基本上，我需要在每个 .section 循环时添加背景颜色。

Loop Start //depending how many images the for.each returns.
 -container -> value from loop 1 results
 -container -> value from loop 2 results
 -container -> value from loop 3 results
 -container -> value from loop 4 results
Loop End

再次感谢！

Answer 1

在您的 $('.thumbnail-image-link img').each 循环中，通过定义 each 回调的第一个参数来保存您正在迭代的当前元素的索引。然后你可以使用 .eq 到 select 正确的 .section 元素，并设置它的 CSS:

$('.thumbnail-image-link img').each(function(i) {

然后

$(".section").eq(i).css('background', colorOne);

对每个应用结果，保持覆盖

Apply results on each, keeps overriding

jquery

loops

each

color-thief