Как проверить, есть ли у всех divs определенный фоновый цвет?

Question

Я динамически добавил кучу разделов определенного класса на свою страницу, и они меняют цвет, когда пользователь на них нависает. Я хочу вызвать определенную функцию, когда последний был установлен на определенный цвет фона, но после некоторого времени беспорядка я все еще не увенчался успехом. Если бы кто-нибудь мог дать некоторое представление, я был бы очень благодарен. Код ниже приведен в моей последней попытке.

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(); 
} 

Answer 1

Это не ясно из кода вы при условии, что равно. Также странно, что вы проверяете, соответствует ли 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; 
} 

Answer 2

Было бы проще добавить класс элементов и следить класса

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

Это не совсем ясно, что происходит с конкретными цветами, упомянутых, но это может быть адаптирована для различных классов, если это требуется.

Обратите внимание, что браузеры не хранят цвета в виде шестнадцатеричных значений .... они хранят их как либо rgb или rgba в зависимости от браузера