모든 오버레이가 닫힌 경우 함수를 실행하십시오.

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

재사용을 위해 오버레이를 풀링하고 있기 때문에 이러한 오버레이를 재사용하고 있다고 언급합니다. 배열이나 이와 유사한 것으로 가정합니다. 대신에 그들은 같은 visible attribute를 점검 오버레이 배열을 볼 수 여부, 루프 있는지 확인하기 위해 (항상 비싼) DOM을 검사 : 그 중 하나가 보이면

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

에서 같은 부모가 가정, 모든 다른 개체를 숨기려면

.

이 정보가 도움이되기를 바랍니다. 도움이 더 필요하면 알려주세요. 이 솔루션은 Jquery를 사용하지만 논리를 다른 용도로 다시 사용할 수 있습니다.