Question

所以这应该是超级简单的，但我不知道什么是错的。

    var imageColors = [];

    $('.portfolio-image').each(function(index, el) {
        RGBaster.colors(this, {
          success: function(payload) {
            console.log(payload.dominant);
            imageColors.push(payload.dominant);
          }
        });
    });

    $('.portfolio-title').each(function(index, el) {
        $(this).css('color', 'imageColors[index]');
    });

});

所以上面的代码有一个数组，应该存储一组图像的颜色。然后我们循环浏览一些文本，并将文本颜色设置为每个图像按其可见顺序的主色。

无论如何，问题是无论我如何添加＆＃34;像imageColors数组，什么都没有。当我运行一个数组长度的console.log时，它始终为0.那么有人可以解释为什么没有添加任何内容吗？

Answer 1

由于你有一个success回调传递给colors插件，它看起来像一个异步方法，这意味着当第二个每个块被执行时，数组可能没有填充所需的数据。

这里的一个解决方案是在回调中设置颜色css，如

var imageColors = [];
var $titles = $('.portfolio-title');
$('.portfolio-image').each(function (index, el) {
    RGBaster.colors(this, {
        success: function (payload) {
            imageColors.push(payload.dominant);
            $titles.eq(index).css('color', payload.dominant);
        }
    });
});

Answer 2

取消字符串值

$.each(imageColors, function(index, el) {
    $('.portfolio-title').css('color', imageColors[index]);
});

错误'imageColors[index]'更正imageColors[index]

Answer 3

你必须使用这个

$('.portfolio-title').each(function(index, el) {
    $(this).css('color', imageColors[index]); \\ remove single quote
});

项目没有添加到数组？

3 个答案: