重复我的jQuery中的函数，有更好的方法吗

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

本文关键字：更好 方法 函数 我的 jQuery      更新时间：2023-12-27

我正在摆弄一些jQuery，并通过构建自己版本的Github Pages教程来自学一些基础知识。我发现我经常重复我的功能，以便在不同的地方实现类似的功能。

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

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

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

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

我还没有测试过这个代码，但应该可以工作！

相关文章：