javascript - 使用 javascript 更改按钮类不起作用

Question

我有三个按钮。他们每个人都改变了横幅部分的背景。单击时我想在它们上设置事件类。我试图获取按钮数组并遍历它们，但有些东西不起作用。你能告诉我我做错了什么吗？

代码如下:

const banner = document.getElementById('carousel');
const btns = banner.getElementsByClassName('button');
for (const i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function() {
        const current = document.getElementsByClassName('active');
        current[0].className = current[0].className.replace('active', '');
        this.className += 'active';
    })
};

.carousel {
  top: 50%;
  position: absolute;
}

.carousel .button {
  height: 10px;
  width: 10px;
  border: 2px solid black;
  margin: 10px;
  border-radius: 9px;
  position: relative;
  cursor: pointer;
}

.carousel .button .active {
  position: absolute;
  margin-top: 3px;
  margin-left: 3px;
  height: 4px;
  width: 4px;
  border-radius: 5px;
  background: #fea100;
}

<div class="carousel" id="carousel">
    <div class="button" id="button1">
        <div class="active"></div>
    </div>
    <div class="button" id="button2">
        <div></div>
    </div>
    <div class="button" id="button3">
        <div></div>
    </div>
</div>

Answer 1

关键字 this 指的是被点击的按钮。您应该以 this 内的 div 为目标。您可以使用 remove() 和 add() 为元素删除/添加类:

尝试以下方式:

let banner = document.getElementById('carousel');
let btns = banner.getElementsByClassName('button');
for (let i = 0; i < btns.length; i++) {
  btns[i].addEventListener('click', function() {
    let current = document.getElementsByClassName('active');
    current[0].className = current[0].classList.remove('active');
    this.querySelector('div').classList.add('active');
  })
}

.carousel {
  top: 50%;
  position: absolute;
}

.carousel .button {
  height: 10px;
  width: 10px;
  border: 2px solid black;
  margin: 10px;
  border-radius: 9px;
  position: relative;
  cursor: pointer;
}

.carousel .button .active {
  position: absolute;
  margin-top: 3px;
  margin-left: 3px;
  height: 4px;
  width: 4px;
  border-radius: 5px;
  background: #fea100;
}

<div class="carousel" id="carousel">
  <div class="button" id="button1">
      <div class="active"></div>
  </div>
  <div class="button" id="button2">
      <div></div>
  </div>
  <div class="button" id="button3">
      <div></div>
  </div>
</div>

您还可以像下面这样使用querySelectorAll() 和forEach():

let btns = document.querySelectorAll('.button');
let divs = document.querySelectorAll('.button > div');
btns.forEach(function(btn){
  btn.addEventListener('click', function() {
    document.querySelector('.active').classList.remove('active');
    this.firstElementChild.classList.add('active');
  });
})

.carousel {
  top: 50%;
  position: absolute;
}

.carousel .button {
  height: 10px;
  width: 10px;
  border: 2px solid black;
  margin: 10px;
  border-radius: 9px;
  position: relative;
  cursor: pointer;
}

.carousel .button .active {
  position: absolute;
  margin-top: 3px;
  margin-left: 3px;
  height: 4px;
  width: 4px;
  border-radius: 5px;
  background: #fea100;
}

<div class="carousel" id="carousel">
  <div class="button" id="button1">
      <div class="active"></div>
  </div>
  <div class="button" id="button2">
      <div></div>
  </div>
  <div class="button" id="button3">
      <div></div>
  </div>
</div>