Javascript Closure가 필요합니까?

Question

아래의 추가 코드는이를 수행하는 더 좋은 방법입니다. 폐쇄가 필요합니까? 그렇다면 어떻게해야합니까?

왼쪽 탐색 기능이 있으며 마우스 오버시 페이지 내용을 표시해야합니다. 내가 CSS를 클래스에있다 .first{visibility:visible;top:150px;}

이것이 내가 이것을 달성하기 위해 사용하고있는 것이다. 나는이 JQuery와 작고 최적화 또는 어떤이 작업을 수행 할 수있는 더 좋은 방법입니다 만든 어떻게

<script type="text/javascript"> 
    $(function() { 
     var $items = $("#sidebar > ul >li") 

     $("#mainabout").addClass("first"); 
     $(".about").mouseover(function() { 
      $("#mainabout").addClass("first"); 
      $("#maineducation").removeClass("first"); 
      $("#mainexperience").removeClass("first"); 
      $("#mainprojects").removeClass("first"); 
      $("#maincontacts").removeClass("first"); 
      //$("#main").css("background-image","url('revoliution2010_btbg.png')"); 
     }); 

     $(".education").mouseover(function() { 
      $("#maineducation").addClass("first"); 
      $("#mainabout").removeClass("first"); 
      $("#mainexperience").removeClass("first"); 
      $("#mainprojects").removeClass("first"); 
      $("#maincontacts").removeClass("first"); 
     }); 
     $(".experience").mouseover(function() { 
      $("#mainexperience").addClass("first"); 
      $("#mainabout").removeClass("first"); 
      $("#maineducation").removeClass("first"); 
      $("#mainprojects").removeClass("first"); 
      $("#maincontacts").removeClass("first"); 
     }); 
     $(".projects").mouseover(function() { 
      $("#mainprojects").addClass("first"); 
      $("#mainexperience").removeClass("first"); 
      $("#mainabout").removeClass("first"); 
      $("#maineducation").removeClass("first"); 
      $("#maincontacts").removeClass("first"); 
     }); 
     $(".contact").mouseover(function() { 
      $("#maincontacts").addClass("first"); 
      $("#mainprojects").removeClass("first"); 
      $("#mainexperience").removeClass("first"); 
      $("#mainabout").removeClass("first"); 
      $("#maineducation").removeClass("first"); 

     }); 
    }) 
</script> 

.

Answer 1

내가 함께 갈 것 :

$(".education").mouseover(function() { 
    $items.removeClass("first"); 
    $("#maineducation").addClass("first"); 
}); 
// etc.. 

당신 수 추상적 한 단계 더 :

var regover = function (source, main) { 
    source.mouseover(function() { 
     $items.removeClass("first"); 
     main.addClass("first"); 
    }; 
}; 

그런 다음 등록 호출은 단지 있습니다

regover($(".education"), $("#maineducation")); 

작은!

$items이 정의 된 동일한 범위에 regover을 정의했는지 확인하십시오. 그것이 "클로저 (closure)"를 의미합니다. 함수는 외부 범위의 변수를 참조합니다. 그래서 예를 들면 :

var $items = ...; 
var regover = function(source, main) { ... } 

그런 식으로 함수는 $items 변수를 "볼"수 있습니다.

Answer 2

첫 번째 클래스를 모두 제거하는 함수를 작성할 수 있습니다. 이제 하나의 클래스를 추가하기 전에이 함수를 호출하십시오.