这个 jQuery each() 循环只返回最后一种颜色（Color Thief）

Question

使用 Color Thief javascript 效果，我编写了一些代码来获取图像的主色并根据图像调整整个主题的配色方案。

这一切都适用于单个产品页面，其中仅使用一张图片。在我的目录页面上，有多个图像我需要从中获取主色。每个产品一张图片。我需要将每种颜色与产品一起展示。

您可以在每个产品的面板中看到彩色 border（它是 brown/orange 颜色）。

我正在使用的 slimmed-down 代码如下：

jQuery( document ).ready( function( $ ) {
    var image = new Image;
    var bg;
    $('.post-image-hidden-container').each(function() {
        bg = $(this).text();

        image.onload = function() {
            var colorThief = new ColorThief();
            var dominantColor = colorThief.getColor(image);
            var colorPalette = colorThief.getPalette(image, 7);
            var backgroundColor = 'rgb('+ dominantColor +')';

            /* Calculate the Lightest Color in the Palette */
            var lightestColor = colorPalette.reduce(function(previousValue, currentValue) {
                var currLightNess = (0.2126*currentValue[0] + 0.7152*currentValue[1] + 0.0722*currentValue[2]);
                var prevLightNess = (0.2126*previousValue[0] + 0.7152*previousValue[1] + 0.0722*previousValue[2]);
                return (prevLightNess < currLightNess) ? currentValue : previousValue;
            });

            /* Calculate the Darkest Color in the Palette */
            var darkestColor = colorPalette.reduce(function(previousValue, currentValue) {
                var currLightNess = (0.2126*currentValue[0] + 0.7152*currentValue[1] + 0.0722*currentValue[2]);
                var prevLightNess = (0.2126*previousValue[0] + 0.7152*previousValue[1] + 0.0722*previousValue[2]);
                return (prevLightNess > currLightNess) ? currentValue : previousValue;
            });

            /* Create Shades and Tints of Lightest Color */
            ...

            /* Shades (darker) */
            ...

            /* Tints (lighter) */
            ...

            /* Handle all CSS based on returned colors */
            $('.product-bottom-info-container').each(function() {
                $(this).css({
                    borderTop: '3px solid rgb('+ lightestColor +')'
                });
            });
        }
        image.src = bg;
    });
});

在声明变量 bg 之后，我立即将整个变量包装在一个 each() 循环中。向下到底部，.product-bottom-info-container 是出现彩色边框的元素。我似乎无法让每个产品的边框成为它自己的颜色。它不断为每个边框提供循环中的最后一种颜色。

一些注意事项：

.post-image-hidden-container 是每个包含产品图像 url.
.product-bottom-info-container 是每个产品底部的容器，带有产品标题和彩色边框。

我是否正确使用了 each() 函数？我做错了什么？

谢谢

更新我能够获取每个图像的所有 RGB 值并将它们放入一个数组中：

var thisColor;
var theseColors = [];

$('.shop-page-item-thumb').each(function() {
    $(this).find('img').each(function() {
        thisColor = colorThief.getColor(this);
        theseColors.push(thisColor);
    });
});

既然我拥有所有可用的 RGB，有没有一种方法可以简单地遍历此数组并将每个值分配给其各自的 .product-bottom-info-container 元素？

theseColors[0] 是第一个 RGB，theseColors[1] 是第二个，依此类推一直到 theseColors[11].

如果我在循环中运行 console.log(thisColor)，我会得到这些结果：

[29, 28, 22]
[217, 195, 189]
[14, 14, 8]
[233, 232, 206]
[31, 31, 31]
[82, 97, 111]
[60, 68, 84]
[34, 29, 30]
[17, 30, 37]
[12, 11, 12]
[56, 43, 26]
[209, 150, 108]

我需要的12个RGB值。所以我们正朝着正确的方向前进。

Mottie 更新 这是其中一种产品的 HTML 结构。 .shop-page-item-thumb 是保存缩略图的容器，但 .shop-page-item-article 是 parent（除了实际的 li 列表项）。

最终更新（感谢 Mottie！） 这是最终起作用的代码：

$('.shop-page-item-thumb').each(function() {
    var thumb = $(this);
    thumb.find('img').each(function() {
        thisColor = colorThief.getColor(this);
        thumb.parent().find('.product-bottom-info-container').css({
            borderTop: '3px solid rgb('+ thisColor +')'
        })
    });
});

非常喜欢，Stack Overflow！ <3

Answer 1

看起来这段代码在每次图像加载后循环遍历每个容器...

/* Handle all CSS based on returned colors */
$('.product-bottom-info-container').each(function() {
  $(this).css({
    borderTop: '3px solid rgb('+ lightestColor +')'
  });
});

试试这个：

$(this).closest('.product-bottom-info-container').css({
  borderTop: '3px solid rgb('+ lightestColor +')'
});

更新：哦，抱歉，我没有仔细查看代码...另一个问题是 image 定义。只有一个，不是每个容器一个...与其在循环外定义，不如在.each循环内找到，然后附上一个onload...

$(this).find('img')[0].onload = function() {

不应更改上面添加边框颜色的代码，因为 this 会引用 onload 函数中的图像。

如果您能提供现成的演示使用，解决问题会更容易。

更新2：不再将颜色推送到数组，而是将它们直接应用于边框；我不知道缩略图与容器的关系，所以我们假设缩略图与容器的顺序相同。 ~~有些 HTML 会有所帮助~~。针对给定的 HTML...

进行了更新

$('.shop-page-item-thumb').each(function() {
    var thumb = $(this);
    thumb.find('img').each(function() {
        thisColor = colorThief.getColor(this);
        // prev() targets the previous element (it should be
        // the 'product-bottom-info-container'; or use
        // thumb.parent().find('.product-bottom-info-container')
        thumb.prev().css({
            borderTop: '3px solid rgb('+ thisColor +')'
        });
    });
});

这个 jQuery each() 循环只返回最后一种颜色（Color Thief）

This jQuery each() loop keeps returning the last color only (Color Thief)

javascript

jquery

each

color-thief