如何用JavaScript实现点击无active类的button时执行对应逻辑

我懂你的纠结点——就是要让点击的button类元素，只有在不包含active类的前提下，才执行后续针对不同目标类的分支逻辑对吧？其实把这个初始判断作为外层条件，把后面的if/else if语句嵌套进去就能完美解决。

原代码（逻辑位置待调整） #

for (var b = 0; b < button.length; b++) { 
  button[b].addEventListener('click', function () { 
    // 原本想在这里判断是否没有active类，但不知道放哪
    if (this.classList.contains('to--home')) { 
      sectionChange(); 
      home.classList.add('active'); 
      navHome.classList.add('active'); 
      upNextKenya.classList.add('active'); 
    } else if (this.classList.contains('to--kenya')) { 
      sectionChange(); 
      kenya.classList.add('active'); 
      navKenya.classList.add('active'); 
      upNextBotswana.classList.add('active'); 
    } else if (this.classList.contains('to--botswana')) { 
      sectionChange(); 
      botswana.classList.add('active'); 
      navBotswana.classList.add('active'); 
      upNextSouthAfrica.classList.add('active'); 
    } 
    sectionTransition(); 
    upNextTransition(); 
  }); 
}

修正后的完整可运行代码 #

var transition = document.querySelector('.transition__overlay'); 
var sections = document.querySelectorAll('.sections'); 
var navLinks = document.querySelectorAll('.navigation__link'); 
var navHome = document.querySelector('.navigation__link--home'); 
var navKenya = document.querySelector('.navigation__link--kenya'); 
var navBotswana = document.querySelector('.navigation__link--botswana'); 
var navSouthAfrica = document.querySelector('.navigation__link--south-africa'); 
var home = document.querySelector('.home'); 
var kenya = document.querySelector('.kenya'); 
var botswana = document.querySelector('.botswana'); 
var upNextKenya = document.querySelector('.up__next--kenya'); 
var upNextBotswana = document.querySelector('.up__next--botswana'); 
var upNextSouthAfrica = document.querySelector('.up__next--south-africa'); 
var toHome = document.querySelectorAll('.to--home'); 
var toKenya = document.querySelectorAll('.to--kenya'); 
var toBotswana = document.querySelectorAll('.to--botswana'); 
var upNext = document.querySelector('.up__next'); 
var upNextBox = document.querySelectorAll('.up__next__box'); 
var button = document.querySelectorAll('.button'); 
var active = document.querySelectorAll('.active'); 

for (var b = 0; b < button.length; b++) { 
  button[b].addEventListener('click', function () { 
    // 核心：先判断当前按钮是否没有active类，满足条件才执行后续逻辑
    if (!this.classList.contains('active')) { 
      if (this.classList.contains('to--home')) { 
        sectionChange(); 
        home.classList.add('active'); 
        navHome.classList.add('active'); 
        upNextKenya.classList.add('active'); 
      } else if (this.classList.contains('to--kenya')) { 
        sectionChange(); 
        kenya.classList.add('active'); 
        navKenya.classList.add('active'); 
        upNextBotswana.classList.add('active'); 
      } else if (this.classList.contains('to--botswana')) { 
        sectionChange(); 
        botswana.classList.add('active'); 
        navBotswana.classList.add('active'); 
        upNextSouthAfrica.classList.add('active'); 
      } 
      sectionTransition(); 
      upNextTransition(); 
    } 
  }); 
} 

// 辅助函数
function sectionChange() { 
  for (var s = 0; s < sections.length; s++) { 
    sections[s].classList.remove('active'); 
  } 
  for (var l = 0; l < navLinks.length; l++) { 
    navLinks[l].classList.remove('active'); 
  } 
  for (var u = 0; u < upNextBox.length; u++) { 
    upNextBox[u].classList.remove('active'); 
  } 
} 

function sectionTransition() { 
  transition.classList.add('transition__overlay--active'); 
  setTimeout(function () { 
    transition.classList.remove('transition__overlay--active'); 
  }, 1000); 
} 

function upNextTransition() { 
  upNext.classList.add('up__next--hide'); 
  setTimeout(function () { 
    upNext.classList.remove('up__next--hide'); 
  }, 1600); 
}

关键逻辑说明 #

• 用if (!this.classList.contains('active'))做外层判断：!是取反运算符，意思是当当前点击的按钮不包含active类时，才进入内部执行逻辑
• 把所有需要在该条件下触发的代码（包括分支判断和过渡函数）都嵌套进这个外层if里，这样就不会在点击已激活按钮时触发无效操作

内容的提问来源于stack exchange，提问作者Liam