开发者

Jquery - How to condense function

How would I condense this function? Any help would be much appreciated. Thanks.

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


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");
        });
    }
}

And yes, I know I'm going to get flamed over the with, use a closure if you so desire.

If you can, add a common class to all of the .Gmail links, and compress the above code to:

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


You can put all repetitive tasks into a function.

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


try this:

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)
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜