1

这样做有什么区别：

$(".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');
        }
    }

});
4

3 回答 3

6

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

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

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

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

$(".topHorzNavLink[linkItem='link2']").click(function() {
    $("#hoverContainer").slideToggle('slow');
});
于 2012-06-20T19:51:18.093 回答
1

.slideToggle()你也可以用

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

    var theHoverContainer = $("#hoverContainer");

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

    if (thisHorzLink == "link2") {

            theHoverContainer.slideToggle('slow');
    }

});
于 2012-06-20T19:52:29.480 回答
1

它们或多或少是相同的速度。jQuery 已经通过查找“#”并对该 ID 执行 document.getElementById 来优化 ID 选择器。除非您将此功能运行 1000 次，否则您不会看到显着的速度提升。

我会采取任何你最喜欢的方法。第一种方法更清楚您选择的内容。第二种方式只定义了一次选择器，因此以后更容易修改。

于 2012-06-20T19:58:32.450 回答