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 に答える