我需要Javascript關閉嗎？

Question

對於下面的額外代碼，有什么更好的方法來實現這一目標。 我需要關閉嗎？如果是的話怎么樣？

我有一個左側導航和鼠標懸停我需要顯示頁面內容。 我在css上課.first{visibility:visible;top:150px;}

這就是我用來實現這一目標的方法。

<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>

我如何使這個jquery變小和優化，或者更好的方法是什么。

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

小！

只要確保你定義regover在同一范圍內$items定義。 這就是“閉包”的意思 - 函數引用外部范圍中的變量。 例如：

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

這樣函數可以“看到” $items變量。

Answer 2

你可以寫一個函數，刪除所有的第一個類。 現在在添加所需的一個類之前調用​​此函數。