jQuery/Javascript - else if else else reach else

Question

저는 jQuery/javascript에 비교적 익숙하지 만 해결해야 할 단순한 걸림돌을 보았습니다. 무엇이 잘못되었는지를 볼 수 없습니다. 죄송 합니다이 간단하게 끝나지 만 부하를 검색했지만 끝까지.

내가 볼 수 있는지 여부에 따라 여러 div가 페이드 인 또는 아웃되도록하려고합니다. div는 효과적으로 '다음'화살표를 클릭 할 때 진행하려는 '페이지'입니다.

여기 내 jQuery의 :

여기

<table id="MainTable" width="765" border="0" align="center"> 
    <tr> 
     <td align="left" valign="top" style="min-height:400px; padding-left:10px; padding-top:10px"> 
      <div id="page1" style="position:absolute"> 
       <div id="p1Title">Introduction</div> 
       <p></p> 
       <div id="p1Detail">....detail.....</div> 
      </div> 
      <div id="page2" style="position:absolute"> 
       <div id="p2Title">Introduction - continued</div> 
       <p></p> 
       <div id="p2Detail">....detail.....</div> 
      </div> 
      <div id="page3" style="position:absolute"> 
       <div id="p3Title">Members</div> 
       <p></p> 
       <div id="p3Detail">....detail.....</div> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td align="right"> 
      <div id="NextArrow"></div> 
     </td> 
    </tr> 
</table> 

는 "NextArrow"에 대한 CSS는 다음과 같습니다 :

#NextArrow 
{ 
    width:120px; 
    height:34px; 
    background-image:url('NextArrow.gif'); 
} 

#NextArrow:hover 
{ 
    background-image:url('NextArrowHover.gif'); 
} 

그래서 여기에 문제의

다음

$(document).ready(function(){  
    $("#page1 > div").hide(); 
    $("#page2 > div").hide(); 
    $("#page3 > div").hide(); 

    $("#page1 > div").fadeIn(800); 

    $("#NextArrow").click(function(){ 
     if($("#page1").is(":visible")){ 
     $("#page1 > div").fadeOut(800); 
     $("#page2 > div").fadeIn(800); 
     } 
     else if($("#page2").is(":visible")){ 
     $("#page2 > div").fadeOut(800); 
     $("#page3 > div").fadeIn(800); 
     } 
     else { 
     alert("no page"); 
     } 
    }) 
}) 

는 HTML입니다. 'NextArrow'div를 클릭하면 'page1'div가 예상대로 사라지고 'page2'div가 사라집니다. 그러나 다시 한 번 클릭해도 아무런 문제가 발생하지 않으며 '페이지 없음'알림도 표시되지 않습니다.

Answer 1

귀하의 답변은 사소한 논리적 인 문제입니다. fadeOut은 부모가 아닌 요소를 페이드 아웃합니다. :visible 검사는 부모가 아닌 지정한 컨테이너의 상태를 확인합니다.

#page1 > div은 페이드 아웃하고 있고 #page1이 아닙니다. 빈 상태에서는 #page1이 계속 표시됩니다. 따라서 $('#page1').is(':visible')은 페이지 상태에 관계없이 항상 true입니다.

페이드 ID/페이드 인 전화를 변경하여 포함 된 div가 아닌 페이드 ID를 페이드 아웃하는 것이 좋습니다.

Answer 2

문제는 #page1가 표시되는 경우 확인하고,하고 있는지, 당신이 #page1이 보이지 않는하지 것이다, 그것은 내부 <div> 요소를 페이드 아웃하고 있다는 점이다. 그것이 될 수도, 코드가 작동하는 방식에

if($("#page1").is(":visible")){ 
    $("#page1").fadeOut(800); 
    $("#page2").fadeIn(800); 
}