Repeating functions in my jQuery, is there a better way to do this?

Question

I'm messing around with some jQuery and teaching myself some of the basics by building my own version of the Github Pages tutorial. 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?

It might be nice if you tell us what your jQuery is meant to do. — theonlygusti, Feb 18 '15 at 12:31
Sure, basically there are various options for the tutorials. At first the user has the option to choose either 'User/Organisation Site' or 'Project Site', then depending on which button is clicked, the page will display the relevant information, then later on there are also options for which git client the user is using, whether to 'Start from Scratch' or 'Generate a Site' etc. Once an option is clicked, a class is added to the body and the content is shown via CSS, some of the options require the jquery to remove more than one class to ensure that only the correct content being shown. — Adam Hollister, Feb 18 '15 at 12:51

score 1 · Accepted Answer · answered Feb 18 '15 at 12:56

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!

Hey thanks this is great! Just wondering, in the case of checkIfBodyHasClassIfSoRemoveIt("showProjectSite"); without the second argument does it just not run the second part of the function automatically? Also if I have a statement saying if else if else if else numerous times like that, can I add more arguments to the original function? or is 2 the limit? — Adam Hollister, Feb 18 '15 at 13:15
in this case the second argument is null, so the 'else if' statement will 'not run' because the condition will be false. Sure that you can add more arguments! How many? http://stackoverflow.com/questions/22747068/is-there-a-max-number-of-arguments-javascript-functions-can-accept — manzapanza, Feb 18 '15 at 14:34

Repeating functions in my jQuery, is there a better way to do this?

1 Answers1