[英]Repeating functions in my jQuery, is there a better way to do this?
I'm messing around with some jQuery and teaching myself some of the basics by building my own version of the Github Pages tutorial . 我正在搞一些jQuery,并通过构建自己的Github Pages教程 版本来教自己一些基础知识。 I find I tend to be repeating my functions a lot in order to achieve similar functionality in different places. 我发现我倾向于重复很多功能,以便在不同的地方实现相似的功能。
// USER / ORGANISATION SITE
// ----------------------- //
// User clicks on #userSite
$("#js-userSite").click( function() {
// Check if body has other class, if so remove it
if( $("body").hasClass("showProjectSite") ) {
$("body").removeClass("showProjectSite");
}
// And an appropriate class is added to the body
$("body").addClass("showUserSite");
});
// USER / ORGANISATION SITE ----> CHOOSE GIT CLIENT
// ----------------------------------------------- //
// Click event
$("#js-gitClientTerminal").click( function() {
// Check if body has other classes, if so remove it
if( $("body").hasClass("showGitClientMac") ) {
$("body").removeClass("showGitClientMac");
}
else if ( $("body").hasClass("showGitClientWindows") ) {
$("body").removeClass("showGitClientWindows");
}
// And an appropriate class is added to the body
$("body").addClass("showGitClientTerminal");
});
// User clicks on #projectSite
$("#js-gitClientWindows").click( function() {
// Check if body has other class, if so remove it
if( $("body").hasClass("showGitClientMac") ) {
$("body").removeClass("showGitClientMac");
}
else if ( $("body").hasClass("showGitClientTerminal") ) {
$("body").removeClass("showGitClientTerminal");
}
// And an appropriate class is added to the body
$("body").addClass("showGitClientWindows");
});
// User clicks on #projectSite
$("#js-gitClientMac").click( function() {
// Check if body has other class, if so remove it
if( $("body").hasClass("showGitClientTerminal") ) {
$("body").removeClass("showGitClientTerminal");
}
else if ( $("body").hasClass("showGitClientWindows") ) {
$("body").removeClass("showGitClientWindows");
}
// And an appropriate class is added to the body
$("body").addClass("showGitClientMac");
});
// PROJECT SITE
// ----------- //
// User clicks on #projectSite
$("#js-projectSite").click( function() {
// Check if body has other class, if so remove it
if( $("body").hasClass("showUserSite") ) {
$("body").removeClass("showUserSite");
} else if ( $("body").hasClass("showGitClientMac") ) {
("body").removeClass("showGitClientMac");
} else if ( $("body").hasClass("showGitClientWindows") ) {
("body").removeClass("showGitClientWindows");
} else if ( $("body").hasClass("showGitClientTerminal") ) {
("body").removeClass("showGitClientTerminal");
}
// And an appropriate class is added to the body
$("body").addClass("showProjectSite");
});
// PROJECT SITE ----> GENERATE OR BUILD FROM SCRATCH
// ------------------------------------------------- //
// User clicks on #projectSite
$("#js-generateSite").click( function() {
// Check if body has other class, if so remove it
if( $("body").hasClass("showStartFromScratch") ) {
$("body").removeClass("showStartFromScratch");
}
// And an appropriate class is added to the body
$("body").addClass("showGenerateSite");
});
// User clicks on #projectSite
$("#js-startFromScratch").click( function() {
// Check if body has other class, if so remove it
if( $("body").hasClass("showGenerateSite") ) {
$("body").removeClass("showGenerateSite");
}
// And an appropriate class is added to the body
$("body").addClass("showStartFromScratch");
});
I know there's a leaner and cleaner way to do this. 我知道有一种更精简的方法可以做到这一点。 Can someone point me in the right direction? 有人可以指出我正确的方向吗?
You could create a simply function like this: 您可以创建一个简单的函数,如下所示:
function checkIfBodyHasClassIfSoRemoveIt(className, classNameAlt){
if($("body").hasClass(className)) {
$("body").removeClass(className);
} else if (classNameAlt && $("body").hasClass(classNameAlt)) {
$("body").removeClass(classNameAlt);
}
}
and you could use like this: 您可以这样使用:
// User clicks on #userSite
$("#js-userSite").click( function() {
// Check if body has other class, if so remove it
checkIfBodyHasClassIfSoRemoveIt("showProjectSite");
// And an appropriate class is added to the body
$("body").addClass("showUserSite");
});
// USER / ORGANISATION SITE ----> CHOOSE GIT CLIENT
// ----------------------------------------------- //
// Click event
$("#js-gitClientTerminal").click( function() {
// Check if body has other classes, if so remove it
checkIfBodyHasClassIfSoRemoveIt("showGitClientMac", "showGitClientWindows");
// And an appropriate class is added to the body
$("body").addClass("showGitClientTerminal");
});
....
....
....
I don't have tested this code, but should work! 我没有测试此代码,但应该可以工作!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.