我需要 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"));

很小！

只需确保在定义 $items 的同一范围内定义 regover 即可。这就是“闭包”的含义——函数引用外部作用域中的变量。例如：

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

这样函数就可以“看到”$items 变量。

Answer 2

您可以编写一个函数来删除所有第一类。现在，在添加您需要的类之前调用​​此函数。