jQuery 优化

Question

这样做有什么区别吗:

$(".topHorzNavLink").click(function() {

    var theHoverContainer = $("#hoverContainer");

    var thisHorzLink = $(this).attr('linkItem');

    if (thisHorzLink == "link2") {
        if ($("#hoverContainer").is(":visible") == true) { 
            $("#hoverContainer").slideUp('slow');
        } else {                
            $("#hoverContainer").slideDown('slow');
        }
    }

});

或者这个:

$(".topHorzNavLink").click(function() {

    var theHoverContainer = $("#hoverContainer");

    var thisHorzLink = $(this).attr('linkItem');

    if (thisHorzLink == "link2") {
        if (theHoverContainer.is(":visible") == true) { 
            theHoverContainer.slideUp('slow');
        } else {                
            theHoverContainer.slideDown('slow');
        }
    }

});

Answer 1

你的第二种方法更高效，因为它只运行一次选择器操作 $("#hoverContainer") 并一遍又一遍地使用相同的 jQuery 对象，而不是运行相同的选择器操作三次每次构造三个新的 jQuery 对象。

为了紧凑和高效，您可以这样做:

$(".topHorzNavLink").click(function() {
    if ($(this).attr('linkItem') == "link2") {
        $("#hoverContainer").slideToggle('slow');
    }
});

或者，如果 linkItem 属性未动态分配/更改，您可以将其烘焙到选择器中，如下所示:

$(".topHorzNavLink[linkItem='link2']").click(function() {
    $("#hoverContainer").slideToggle('slow');
});