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

Question

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

修改

只是为了澄清我不确定if语句的if语句检查是否必须在循环之前或在btn [i]事件监听器内。 if document.querySelectorAll（＆＃39; .sections＆＃39;）。classListContains（＆＃39; active＆＃39;）{ 什么都不做}否则{运行以下代码}

欣赏任何建议

＆＃13;

＆＃13;

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

＆＃13;

* {
  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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

解决方案

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

，将停止效果

＆＃13;

＆＃13;

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

＆＃13;

* {
  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%);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;