0

I have three button. Each of them change backgroud of banner section. I want to set active class on them when clicked. I was trying to take array of buttons and iterate through them but something is not working. Could you tell me what am I doing wrong?

Here is the code:

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>

4

1 回答 1

1

关键字this是指点击的按钮。您应该针对this中的 div 。您可以使用remove()andadd()删除/添加类到元素：

试试下面的方法：

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>

于 2019-04-13T10:35:56.043 回答