Если все оверлеи закрыты, то выполните функцию

Question

У меня есть кнопка на баннере в верхней части моей страницы, на которой накладывается несколько накладок yui2. Каждый оверлей имеет на нем закрытую кнопку (которая просто изменяет видимость на скрытый, чтобы ее можно было повторно использовать). После запуска оверлей также появляется кнопка на баннере, который будет закрывать все накладки при нажатии.

Это дает возможность закрыть все или закрыть каждый по отдельности. Это то, за что я застрял:

Если пользователь закрывает индивидуальное оверлей, после закрытия оверлея, я хочу проверить, открыто ли какое-либо другое наложение. Если они случайно закрыли все из них по отдельности, мне нужно вернуть баннер вверху и удалить кнопку «закрыть все».

я могу найти все накладки, выполнив: с

var elements = YAHOO.util.Dom.getElementsByClassName('test'); 

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

Это ответ, который я придумал. Просто не уверен, что это правильно.

var elements = document.getElementsByClassName('test'); 
var visiblecounter = 0; 
for (var i = 0; i < elements.length; i++) { 
    if(elements[i].style.visibility!='hidden'){ 
     alert("not hidden"); 
     visiblecounter ++;  
    }  
    } 
    ​ 
if(visiblecounter > 0){ 
    alert("all overlays are closed individually. you can remove close all button"); 
} 

Answer 1

Вы упомянули, что вы повторно используете эти наложения, так как вы объединяете оверлеи для повторного использования, я предполагаю, что вы их в массиве или что-то в этом роде. Вместо того, чтобы проверять DOM (что всегда дорого), чтобы увидеть, если они видны или нет, цикл через массив накладками проверки на visible attribute, как:

var anyVisible = false; 
    for (i = 0; i < myOverlays.length; i+=1) { 
     anyVisible |= myOverlays[i].cfg.getProperty("visible"); 
    } 

Если какой-либо из них видны, отключите кнопку.

Answer 2

Я не уверен, что у меня возникает вопрос, но я постараюсь изо всех сил помочь. Вот некоторые вещи, которые я бы сделал. Я также определяю активный класс, поэтому мои элементы HTML будут записаны следующим образом:

<div class="john active"></div> 

и в моем css я бы написал.

.john {display: none}; 
.active {display: block}; 

По умолчанию объект скрыт! Но когда вы добавляете к нему «активный» класс, он появляется на экране. Итак, теперь мы можем сделать следующее волшебство.

$(".hideButton").click(function() { 
    $(this).removeClass("active"); 
}); 

Если я хочу, чтобы скрыть все другие объекты, при условии, что они имеют один и тот же родитель в DOM

$(".hideOthersButton").click(function() { 
    $(this).siblings().removeClass("active"); 
}); 

, если я хочу, чтобы скрыть все объекты, которые разделяют один и тот же родитель.

$(".hideEverything").click(function() { 
    $(".parent").children().removeClass("active"); 
}); 

Надеюсь, это поможет! Дай мне знать, если тебе еще понадобится помощь. В решении используется JQuery, но вы можете переформулировать логику для чего-либо еще.