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)
}
精彩评论