javascript - 在我的 jQuery 中重复函数，有更好的方法吗？

Question

我正在摆弄一些 jQuery，并通过构建 my own version 自学一些基础知识。 Github Pages tutorial的。我发现我倾向于大量重复我的功能，以便在不同的地方实现类似的功能。

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

我知道有一种更精简、更干净的方法可以做到这一点。有人能指出我正确的方向吗？

Answer 1

您可以创建一个像这样的简单函数:

function checkIfBodyHasClassIfSoRemoveIt(className, classNameAlt){
  if($("body").hasClass(className)) {
    $("body").removeClass(className);
  } else if (classNameAlt && $("body").hasClass(classNameAlt)) {
    $("body").removeClass(classNameAlt);
  }
}

你可以这样使用:

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

我没有测试过这段代码，但应该可以工作!