Jquery - 如何压缩函数

Question

我如何压缩此功能？任何帮助将非常感激。感谢。

$(document).ready(function () {
    $(".GoogleAppsProducts li.ProductIcon1").click(function () {
        $(".TabContent2").hide("slow");
        $("this").show("slow");
        $(".Gmail").show("slow").css("visibility", "visible");
    });
    $("input[id$='GoBackButton0']").click(function () {
        $(".TabContent2").show("slow");
        $("this").hide("slow");
        $(".Gmail").hide("slow").css("visibility", "visible");
        return false;
    });
    $(".GoogleAppsProducts li.ProductIcon2").click(function () {
        $(".TabContent2").hide("slow");
        $("this").show("slow");
        $(".GoogleCalendar").show("slow").css("visibility", "visible");
    });
    $("input[id$='GoBackButton1']").click(function () {
        $(".TabContent2").show("slow");
        $("this").hide("slow");
        $(".GoogleCalendar").hide("slow").css("visibility", "visible");
        return false;
    });
    $(".GoogleAppsProducts li.ProductIcon3").click(function () {
        $(".TabContent2").hide("slow");
        $("this").show("slow");
        $(".GoogleDocs").show("slow").css("visibility", "visible");
    });
    $("input[id$='GoBackButton2']").click(function () {
        $(".TabContent2").show("slow");
        $("this").hide("slow");
        $(".GoogleDocs").hide("slow").css("visibility", "visible");
        return false;
    });
    $(".GoogleAppsProducts li.ProductIcon4").click(function () {
        $(".TabContent2").hide("slow");
        $("this").show("slow");
        $(".GoogleCloud").show("slow").css("visibility", "visible");
    });
    $("input[id$='GoBackButton3']").click(function () {
        $(".TabContent2").show("slow");
        $("this").hide("slow");
        $(".GoogleCloud").hide("slow").css("visibility", "visible");
        return false;
    });
    $(".GoogleAppsProducts li.ProductIcon5").click(function () {
        $(".TabContent2").hide("slow");
        $("this").show("slow");
        $(".GoogleGroups").show("slow").css("visibility", "visible");
    });
    $("input[id$='GoBackButton4']").click(function () {
        $(".TabContent2").show("slow");
        $("this").hide("slow");
        $(".GoogleGroups").hide("slow").css("visibility", "visible");
        return false;
    });
    $(".GoogleAppsProducts li.ProductIcon6").click(function () {
        $(".TabContent2").hide("slow");
        $("this").show("slow");
        $(".GoogleSites").show("slow").css("visibility", "visible");
    });
    $("input[id$='GoBackButton5']").click(function () {
        $(".TabContent2").show("slow");
        $("this").hide("slow");
        $(".GoogleSites").hide("slow").css("visibility", "visible");
        return false;
    });
    $(".GoogleAppsProducts li.ProductIcon7").click(function () {
        $(".TabContent2").hide("slow");
        $("this").show("slow");
        $(".GoogleVideo").show("slow").css("visibility", "visible");
    });
    $("input[id$='GoBackButton6']").click(function () {
        $(".TabContent2").show("slow");
        $("this").hide("slow");
        $(".GoogleVideo").hide("slow").css("visibility", "visible");
        return false;
    });
    $(".GoogleAppsProducts li.ProductIcon8").click(function () {
        $(".TabContent2").hide("slow");
        $("this").show("slow");
        $(".GoogleMoreGoogleApps").show("slow").css("visibility", "visible");
    });
    $("input[id$='GoBackButton7']").click(function () {
        $(".TabContent2").show("slow");
        $("this").hide("slow");
        $(".GoogleMoreGoogleApps").hide("slow").css("visibility", "visible");
        return false;
    });
    $(".GoogleAppsProducts li.ProductIcon9").click(function () {
        $(".TabContent2").hide("slow");
        $("this").show("slow");
        $(".GoogleAppsMrkt").show("slow").css("visibility", "visible");
    });
    $("input[id$='GoBackButton8']").click(function () {
        $(".TabContent2").show("slow");
        $("this").hide("slow");
        $(".GoogleAppsMrkt").hide("slow").css("visibility", "visible");
        return false;
    });
    $(".GoogleAppsProducts li.ProductIcon10").click(function () {
        $(".TabContent2").hide("slow");
        $("this").show("slow");
        $(".GoogleChrome").show("slow").css("visibility", "visible");
    });
    $("input[id$='GoBackButton9']").click(function () {
        $(".TabContent2").show("slow");
        $("this").hide("slow");
        $(".GoogleChrome").hide("slow").css("visibility", "visible");
        return false;
    });
})

Answer 1

var links = [
    ['.GoogleAppsProducts li.ProductIcon1', '.Gmail'],
    ['.GoogleAppsProducts li.ProductIcon2', '.GoogleCalendar'],
    ...
];

for(var i=0, l=links.length; i<l; i++){
    with({i:i}){
        $(links[i][0]).click(function () {
            $(".TabContent2").hide("slow");
            $(this).show("slow");
            $(links[i][1]).show("slow").css("visibility", "visible");
        });
    }
}

是的，我知道我会在with上被焚烧，如果你愿意，可以使用一个封闭。

如果可以，请为所有.Gmail链接添加公共类，并将上述代码压缩为：

var links = [
    ['.gmail-link', '.Gmail'],
    ...
]

Answer 2

您可以将所有重复性任务放入函数中。

     $(document).ready(function () {
        $(".GoogleAppsProducts li.ProductIcon1").click(function () {doMyStuff();});
        $("input[id$='GoBackButton0']").click(function () {
           doMyStuff();
           return false;
        });
        $(".GoogleAppsProducts li.ProductIcon2").click(function () { doMyStuff();});
        $("input[id$='GoBackButton1']").click(function () {
            doMyStuff();
            return false;
        });
        $(".GoogleAppsProducts li.ProductIcon3").click(function () {doMyStuff();});
        $("input[id$='GoBackButton2']").click(function () {
            doMyStuff(); return false;
         });

    function doMyStuff(){
     $(".TabContent2").show("slow");
     $("this").hide("slow");
     $(".GoogleDocs").hide("slow").css("visibility", "visible");
    }

Answer 3

试试这个：

var google = ['Gmail', 'GoogleCalendar', 'GoogleDocs', 'GoogleCloud', 'GoogleGroup', 'GoogleSites', 'GoogleVideo', 'GoogleMoreGoogleApps', 'GoogleAppsMrkt', 'GoogleChrome']
for (i = 1; i <= 10; i++) { (function() {
        $(".GoogleAppsProducts li.ProductIcon" + i + "").click(function() {
            $(".TabContent2").hide("slow");
            $(this).show("slow");
            $('.' + google[i] + '').show("slow").css("visibility", "visible");
        });
    })(i)
}
for (i = 0; i <= 9; i++) { (function() {
        $('input[id$="GoBackButton' + i + '"]').click(function() {
            $(".TabContent2").show("slow");
            $(this).hide("slow");
            $('.' + google[i] + '').hide("slow").css("visibility", "visible");
            return false;
        });
    })(i)
}