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

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

我需要Javascript关闭吗？

2 个答案: