如何检查所有div是否具有特定的背景颜色？

我已经动态地将一些特定类的div添加到我的页面，并且当用户将它们悬停在它们上面时，它们会改变颜色。当最后一个被设置为特定的背景颜色时，我想触发一个特定的功能，但是在弄乱了一段时间之后，我仍然不成功。如果有人能提供一些见解，我会非常感激。下面的代码来自我最近的尝试。如何检查所有div是否具有特定的背景颜色？

var counter=0; 
$(".orb").each(function() { 
    if ($(this).css("background-color") === "#ede74a") { 
     counter=counter+1; 
    } 
} 
if (counter === orbarray.length) { //all backgrounds have been set 
    executeFunction(); 
}

来源

2015-08-26 user3394907

这不是什么从等于您所提供的代码清晰。你也很奇怪，看看counter是否等于$.each()回调之外的的长度。

但是所以你说你需要触发一个特定的功能，当最后一个<div>已被盘旋。听起来就像你想要一个mouseenter事件的处理程序，然后检查是否所有元素已经在该处理程序中悬停。另外，如果你应用一个类，你可以使用一种更方便的方法来检查元素是否被徘徊，而不是应用内联CSS。

观察：

function checkOrbs() { 
    var $orbs = $('.orb'), 
     $activeOrbs = $orbs.filter('.active'); 

    if ($orbs.length === $activeOrbs.length) { 
    executeFunction(); 
    } 
} 

$('.orb').on('mouseenter', function(e) { 
    var $target = $(e.target); 

    $target.addClass('active'); 

    checkOrbs(); 
});

然后就是通过CSS应用背景颜色：

.active { 
    background-color: #ede74a; 
}

来源

2015-08-26 04:17:35 benjarwar

太棒了。感谢这个例子 – user3394907

会更简单的类添加到元素和跟踪类的

$(document).on('mouseenter','.orb',function(){ 
    var $orb = $(".orb"); 
    $(this).addClass('hovered'); 
    if($orb.filter('.hovered').length === $orb.length){ 
     alert('All hovered!'); 
     executeFunction(); 
    } 
});

目前还不清楚究竟是什么有特别提到的颜色发生，但这个可以适应多个类，如果需要。

浏览器就不颜色存储为十六进制值

注意....他们储存它们要么rgb或rgba取决于浏览器

来源

2015-08-26 04:15:04 charlietfl

如果海报动态添加'''.orb'''元素，也未必是安全的提前将它们存储在一个变量中，而不是在处理程序中检查它们。 – benjarwar

@benjarwar yep ...我没有注意到动态添加的部分 – charlietfl

如何检查所有div是否具有特定的背景颜色？

回答

相关问题