Javascript 这个jQuery each()循环只返回最后一种颜色(颜色盗贼)
使用javascript效果,我编写了一些代码来获取图像的主色,并根据图像调整整个主题的配色方案 这一切都在单个产品页面上运行良好,其中只使用了一张图像。在我的目录页面上,我需要从多个图像中获取主色调。每个产品一张图片。我需要在产品中显示每种单独的颜色Javascript 这个jQuery each()循环只返回最后一种颜色(颜色盗贼),javascript,jquery,each,color-thief,Javascript,Jquery,Each,Color Thief,使用javascript效果,我编写了一些代码来获取图像的主色,并根据图像调整整个主题的配色方案 这一切都在单个产品页面上运行良好,其中只使用了一张图像。在我的目录页面上,我需要从多个图像中获取主色调。每个产品一张图片。我需要在产品中显示每种单独的颜色 您可以在每个产品的面板中看到彩色的边框(棕色/橙色) 我正在使用的精简代码如下: jQuery( document ).ready( function( $ ) { var image = new Image; var bg
您可以在每个产品的面板中看到彩色的
边框
(棕色/橙色)
我正在使用的精简代码如下:
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;
});
});
现在我有了所有的RGB,有没有一种方法可以简单地循环这个数组,并将每个值分配给它各自的.product bottom info容器元素
theseColors[0]
是第一个RGB,theseColors[1]
是第二个RGB,等等。一直到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值。所以我们正朝着正确的方向前进
莫蒂的更新 下面是其中一个产品的HTML结构
.shop page item thumb
是保存缩略图的容器,但是.shop page item article
是父项(除了实际的li
列表项)
最终更新(谢谢莫蒂!) 这是一段最终起作用的代码:
$('.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 +')'
})
});
});
太多的爱,堆积如山 这段代码似乎在每次图像加载后都在每个容器中循环
/* 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 +')'
});
更新:哦,对不起,我没有仔细看代码。。。另一个问题是图像的定义。每个容器只有一个,而不是一个。。。不要在循环外部定义它,而是在
内部找到它。每个循环,然后附加一个onload
$(this).find('img')[0].onload = function() {
它不应更改上面添加边框颜色的代码,因为此
将引用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 +')'
});
});
});
嗨,莫蒂,谢谢你的回复。不幸的是,仍然不能工作。没有任何错误,只是现在没有颜色。我打算再玩几次。:)莫蒂,在你更新之前,我的方向是正确的。问题-我能够将所有RGB值放入一个数组中。然后,我是否可以简单地为每个.product bottom info容器边框颜色使用每个数组值?我将用更新的代码更新我的问题。我也会尽力落实你的建议。谢谢我会为你做一个演示,但颜色小偷是时髦的,不允许在脚本中使用远程图像。只有本地图像。莫蒂,我没办法让它工作。我已经考虑过你的建议了,我甚至不能用这种方式在控制台中得到任何东西。色贼是一种野兽,文档非常有限。但我们最终会找到答案的!谢谢,我已经修改了上次更新。。。我希望你能弄明白,我今晚要退出。
$('.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 +')'
});
});
});