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?

Answer 1

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!