else 절이없는 if 문보다 더 훌륭한 해결책이 있습니까? 다음 코드

Question

그것이 VisibleVisible 설정해야하고 다른 모든 Controls (Controls[i]) 아니다 Control (Toggle 최초 OL가 trigers 소자)가 그렇게 될 경우 Hidden.

의 .js

function Toggle(Control){ 
    var Controls=document.getElementsByTagName("ol",document.getElementById("Quote_App")); 
    var Control=Control.getElementsByTagName("ol")[0]; 
    if(Control.style.visibility!="visible"){ 
     for(var i=0;i<Controls.length;i++){ 
      if(Controls[i]!=Control){ 

       Reveal("hide",20,0.3,Controls[i]); 

      }else{ 

       Reveal("show",20,0.3,Control); 

      }; 
     }; 
    }else{ 

     Reveal("hide",20,0.3,Control); 

    }; 
}; 

함수 [Toggle] 잘 작동하지만

, 실제로 이미하더라도 Hidden Controls[i]에 설정된다.

이 코드는 아래 코드와 같이 If 문을 쉽게 추가 할 수 있습니다. 더 좋은 해결책이 있습니까? 아마도 If이라는 복잡한 조건일까요?

의 .js

function Toggle(Control){ 
    var Controls=document.getElementsByTagName("ol",document.getElementById("Quote_App")); 
    var Control=Control.getElementsByTagName("ol")[0]; 
    if(Control.style.visibility!="visible"){ 
     for(var i=0;i<Controls.length;i++){ 
      if(Controls[i]!=Control){ 

if(Controls[i].style.visibility=="visible"){ 

       Reveal("hide",20,0.3,Controls[i]); 

}; 

      }else{ 

       Reveal("show",20,0.3,Control); 

      }; 
     }; 
    }else{ 

     Reveal("hide",20,0.3,Control); 

    }; 
}; 

당신의 도움이

항상 감사합니다.

Answer 1

if(Controls[i]!=Control && Controls[i].style.visibility=="visible") { 
    Reveal("hide",20,0.3,Controls[i]); 
} 

Answer 2

추악한 순수 자바 스크립트 코드 세계에서 해결책은 좋습니다. 하지만 당신이 "우아함"이라고 말했기 때문에, 제 대답은 jQuery를 사용하는 것입니다.

나는 이벤트 기반이 아닌 행동 기반 코드를 사용하므로 코드에 정확히 일치하지는 않을 것이다. 그러나 다음과 같이 보일 것이다.

$('#Quote_app ol').click(function() { 
    if ($(this).is(':visible')) { 
    $(this).fadeOut(); 
    } else { 
    $(this).fadeIn(); 
    $('ol', $(this).parent()).not(this).fadeOut(); 
    } 
}); 

ID 이벤트는 ID가 Quote_app 인 항목 아래의 모든 ol 요소에 연결되며 현재 표시되어 있으면 숨기고 그렇지 않으면 다른 모든 ol 요소를 숨 깁니다.

Answer 3

코드가 무엇을 의미하는지에 대해 확실하지 않습니다. Stratagy는 먼저 모든 항목에 대해 기본 작업을 수행 한 다음 선택한 항목에 대해 특정 작업을 수행합니다. 이런 식으로 뭔가 :

for(var i=0;i<Controls.length;i++){ 
    if(Controls[i].style.visibility=="visible"){ 

     Reveal("hide",20,0.3,Controls[i]); 

    }; 
} 
Reveal("show",20,0.3,Control); 

Answer 4

if(Controls[i] != Control) { 
    if(Controls[i].style.visibility == "visible"){ 
    Reveal("hide", 20, 0.3, Controls[i]); 
    }; 
} else { 
    Reveal("show", 20, 0.3, Control); 
}; 

는 다음과 같이 다시 작성할 수 있습니다 :

if (Controls[i] == Control) { 
    Reveal("show", 20, 0.3, Control); 
} else if (Controls[i].style.visibility == "visible") { 
    Reveal("hide", 20, 0.3, Controls[i]); 
} 

Answer 5

가 jQuery를 제안에서에 따르 -

jQuery를 종종에서 더욱 매력적인 beomes 토글 기능이 있습니다 이 상황은 코드를 두 줄로 줄여줍니다.

당신은이 같은 사용자 지정 애니메이션을 작성할 수 있습니다 :이 칼 Swedberg을 인용, 현재 toggleFade 기능 밤은하지만 쉽게 추가 할 수 있습니다 그리고

jQuery.fn.fadeToggle = function(speed, easing, callback) { 
    return this.animate({opacity: 'toggle'}, speed, easing, callback); 
    }; 

을, 당신은이 작업을 수행 할 수 있습니다

$(".bio-toggler").click(function() { 
    $("#bio-form").fadeToggle(); 
    }) 

;

Answer 6

Reveal("hide", ...) 기능이 표시 여부를 숨김으로 설정했다고 가정하면 getComputedStyle을 사용하지 않아도 작동합니다.

if(Controls [i] !== Control && Controls[i].style.visibility !== "hidden") { 
    Reveal("hide", 20, 0.3, Controls[i]); 
} 

Answer 7

작은 원숭이 패치를 사용하면 외부 프레임 워크를 사용하지 않고도 훨씬 더 깨끗하게 만들 수 있습니다. 나는 또한 애니메이션의 순서가 중요하지 않다는 가정에 기초하여 논리를 개편 할 자유를 취했다.

if Control is hidden 
    loop through Controls as C 
     hide if C != Control 
     show if C = Control 
else 
    hide Control 

이 알고리즘을 해석하는 또 다른 방법이있다 - 한 Controls 적어도 하나 개의 요소 (상관 없습니다) 포함으로, Control의 가시성이 전환됩니다. 모든 (Controls minus Control)이 숨겨집니다. 그래서 저는 항상 컨트롤에 하나의 컨트롤이 있다고 가정하는 자유를 다시 얻었습니다. 그리고 Control은 항상 토글됩니다.

여기에 원숭이 패치 ++ 코드가 있습니다 (jsfiddle에도 있음). 이렇게하면 함수에서 모든 if와 elses가 제거됩니다. 여기

function Toggle(Control) { 
    var Controls = document.getElementsByTagName("ol" .. 
    var Control = Control.getElementsByTagName("ol")[0]; 

    Control.toggle(); 
    Controls.filter(function(c) { 
     return c != Control && c.isVisible(); 
    }).hide(); 
}; 

을 코드 숨김입니다 :

는 Toggle 기능은 이제 다음과 같습니다. 라인 3

Element.prototype.isVisible = function() { 
    return this.style.visibility == 'visible' || this.style.visibility == ''; 
}; 

Element.prototype.show = function() { 
    this.style.visibility = 'visible'; 
}; 

Element.prototype.hide = function() { 
    this.style.visibility = 'hidden'; 
}; 

Element.prototype.toggle = function() { 
    this.isVisible() ? this.hide() : this.show(); 
};