javascript - 如果元素有类什么都不做运行匿名函数

Question

我想在我的 javascript 中添加一个 if 语句，这样如果我的部分类有事件类，我不希望它在单击按钮时做任何事情，但如果没有，我希望它运行我创建的匿名函数只是一个简单的转换。无法在需要去的地方或如何实现它的地方工作。我还没有将幻灯片设置为在点击时更改，因为我只是想让这个位先工作。

编辑

只是为了澄清，我不确定检查类事件的 if 语句是否必须在循环之前或 btn[i] 事件监听器内部。 如果 document.querySelectorAll('.sections').classListContains('active') { 什么都不做 } 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

解决方案

使用 if 语句 的工作解决方案，如果任何 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>