0

我经常花 10 到 20 分钟查看 jQuery 片段，以找到缩短代码的方法。

现在这段代码我一直在看一遍又一遍，但只是想知道人们将如何重构它，或者他们是否真的会重构它。

$("#tabs ul li").first().addClass("activeTab");
$("#tabs div").hide().first().show();
$("#tabs ul li a").click(function(){
    $("#tabs div").hide();
    $("#tabs").find($(this).attr('href')).show();
});

当我试图提高我在 jQuery 中的编码技能时，这更像是一个好奇的问题，而不是寻求帮助的呼声。

/* 编辑

链接附加的jsFiddle

您所有精彩建议的最终结果是。

var $c = $("#tabs"), $t = $c.find("li"), $d = $c.find("div");
$d.not(":first").hide();
$t.find("a").click(function() {
    $d.hide().filter($(this).attr('href')).show();
}).closest("li").first().addClass("activeTab");
4

3 回答 3

4

我将重构如下。不需要每次都创建 jQuery 对象，引用它以备将来使用。

    var $tabs = $("#tabs");

    $tabs.find("li:first").addClass("activeTab");
    $tabs.find('div').not(':first').hide();
    $tabs.find("a").click(function() {
        $("#tabs div").hide().filter($(this).attr('href')).show();
    })
于 2012-11-26T13:51:04.223 回答
2

我会重构选择器，因此遍历 Dom 的成本会更低。它会是这样的：

var $tabsControl = $("#tabs"),
    $tabs = $tabsControl.find("ul > li"),
    $tabsContent = $tabsControl.find("div");

$tabs.first().addClass("activeTab");
$tabsContent.hide().first().show();
$tabs.find("a").click(function() {
    $tabsContent.hide();
    $tabsControl.find($(this).attr("href")).show();
});
于 2012-11-26T13:53:09.343 回答
0

我个人认为这段代码还可以，但会进行重构$("#tabs div").hide().first().show();以使其更具可读性，也许是：

$("#tabs div").not(":first").hide();
于 2012-11-26T13:50:33.803 回答