如果element有类，则不执行任何其他运行匿名函数

Question

我想在我的javascript中添加一个if语句，这样如果我的section类有活动的类我不希望它在按钮点击上做任何事情，但如果它没有它我想让它运行匿名函数我创造了这只是一个简单的过渡。无法在需要的地方或如何实施它。我还没有设置幻灯片在点击时更改，因为我只想让这一点先工作。

编辑

只是为了澄清我不确定if语句的if语句检查是否必须在循环之前或在btn [i]事件监听器内。 if document.querySelectorAll（'。sections'）。classListContains（'active'）{Do Nothing} else {运行下面的代码}

感谢任何建议

var btn = document.querySelectorAll('.button');
var sections = document.querySelectorAll('.sections');
for (var i = 0; i < btn.length; i++) {
  btn[i].addEventListener('click', function() {
    document.querySelector('.transition__overlay').classList.add('transition__overlay--active');
    setTimeout(function() {
      document.querySelector('.transition__overlay').classList.remove('transition__overlay--active');
    }, 1200);
  });
}

* {
  padding: 0;
  margin: 0;
}

.wrapper {
  width: 100%;
  height: 100vh;
  position: relative;
}

.buttons {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  background: grey;
}

.button {
  flex: 1 0 0;
  text-align: center;
  cursor: pointer;
}

.button span {
  color: black;
}

.transition__overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  z-index: 9999;
  background-color: brown;
  transition: width 1s;
}

.transition__overlay--active {
  width: 100%;
  left: 0;
  transition: width 1s;
}

.sections {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sections.active {
  transform: translateX(0);
}

<div class="wrapper">
  <div class="transition__overlay"></div>
  <section class="sections section1 active">
    <span>Section 1</span>
  </section>
  <section class="sections section2">
    <span>Section 2</span>
  </section>
  <section class="sections section3">
    <span>Section 3</span>
  </section>
  <section class="sections section4">
    <span>Section 4</span>
  </section>
  <div class="buttons">
    <div class="button button1">
      <span>button 1</span>
    </div>
    <div class="button button1">
      <span>button 2</span>
    </div>
    <div class="button button1">
      <span>button 3</span>
    </div>
    <div class="button button1">
      <span>button 4</span>
    </div>
  </div>
</div>

Answer 1

Solution

使用if statement的工作解决方案，如果任何sections类具有类active将停止效果

---

// Check whether any element with class `sections` has `active` class
function CheckClass()
{
  for (var j = 0 ; j < document.getElementsByClassName("sections").length ; j++) {
    for (var k = 0 ; k < document.getElementsByClassName("sections").length ; k++ ) {
        if (document.getElementsByClassName("sections")[j].getAttribute("class") == "sections section" + k +  " active")
      return "active" ;
    // the `sections` class has an `active class`
    // exit
    }
  }
  return "inactive" ;
}
var btn = document.querySelectorAll('.button');
var sections = document.querySelectorAll('.sections');
for (var i = 0; i < btn.length; i++) {
  btn[i].addEventListener('click', function() {
   if (CheckClass() !== "active") { document.querySelector('.transition__overlay').classList.add('transition__overlay--active');
    setTimeout(function() {
      document.querySelector('.transition__overlay').classList.remove('transition__overlay--active');
    }, 1200);
    }
  });
}

* {
  padding: 0;
  margin: 0;
}

.wrapper {
  width: 100%;
  height: 100vh;
  position: relative;
}

.buttons {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  background: grey;
}

.button {
  flex: 1 0 0;
  text-align: center;
  cursor: pointer;
}

.button span {
  color: black;
}

.transition__overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  z-index: 9999;
  background-color: brown;
  transition: width 1s;
}

.transition__overlay--active {
  width: 100%;
  left: 0;
  transition: width 1s;
}

.sections {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sections .active {
  transform: translateX(0%);
}

<div class="wrapper">
  <div class="transition__overlay"></div>
  <section class="sections section1 active">
    <span>Section 1</span>
  </section>
  <section class="sections section2">
    <span>Section 2</span>
  </section>
  <section class="sections section3">
    <span>Section 3</span>
  </section>
  <section class="sections section4">
    <span>Section 4</span>
  </section>
  <div class="buttons">
    <div class="button button1">
      <span>button 1</span>
    </div>
    <div class="button button1">
      <span>button 2</span>
    </div>
    <div class="button button1">
      <span>button 3</span>
    </div>
    <div class="button button1">
      <span>button 4</span>
    </div>
  </div>
</div>