JS：仅在当前元素上设置活动类

Question

我试图将活动类仅设置为当前按钮，但是当单击另一个按钮时，我似乎无法将其删除。

我创建了一个循环以识别单击了哪个按钮，但我无法从其他类中删除该类

＆＃13;

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="app">

  <div v-for="(v, k) in object1">
    <p> {{ k }} | {{ v }} </p>
    <input type="text" class="form-control" :value="k" @input="updateObject($event, k, 'object1')">
    <input type="text" class="form-control" v-model="object1[k]">
  </div>
  
  <br />
  
  <div v-for="item in object2">
    <p> {{ item }} </p>
    <input type="text" class="form-control" v-model="item.key">
    <input type="text" class="form-control" v-model="item.value">
  </div>

</div>

＆＃13;

var btn = document.getElementsByClassName('provas-card-btn')

for(var i = 0; i < btn.length; i++){
btn[i].classList.remove('active')
  btn[i].addEventListener('click',function(){
    this.classList.add('active');
  });
  ;
}

＆＃13;

body{
  background:#2a2a2a;
}

.provas-card-btn{
  width:30px;
  height:30px;
  border-radius:100px;
  border:1px solid #fff;
  background:transparent;
  position:relative;
  transition: all .3s;
  margin:20px;
  }
  
  .provas-card-btn:after{
    content:"";
    display:block;
    height:2px;
    width:18px;
    background:#fff;
    position:absolute;
    left:calc(50% - 9px);
    top:13px;
  }
  .provas-card-btn:before{
    content:"";
    display:block;
    height:18px;
    width:2px;
    background:#fff;
    position:absolute;
    left:calc(50% - 1px);
    top:5px;
  }
  
.provas-card-btn.active:before{

    transform:rotate(90deg);
  }

}

＆＃13;

＆＃13;

＆＃13;

我还是Js的菜鸟，所以如果有人能帮助我，我会感激不尽！ 另外，我试图使用纯粹的js。

Answer 1

事件监听器需要遍历所有按钮，从this以外的所有按钮中删除该类。

＆＃13;

＆＃13;

var btn = document.getElementsByClassName('provas-card-btn')

for (var i = 0; i < btn.length; i++) {
  btn[i].addEventListener('click', function() {
    for (var j = 0; j < btn.length; j++) {
      if (btn[j] == this) {
        btn[j].classList.add('active');
      } else {
        btn[j].classList.remove('active');
      }
    }
  });
}

＆＃13;

body {
  background: #2a2a2a;
}

.provas-card-btn {
  width: 30px;
  height: 30px;
  border-radius: 100px;
  border: 1px solid #fff;
  background: transparent;
  position: relative;
  transition: all .3s;
  margin: 20px;
}

.provas-card-btn:after {
  content: "";
  display: block;
  height: 2px;
  width: 18px;
  background: #fff;
  position: absolute;
  left: calc(50% - 9px);
  top: 13px;
}

.provas-card-btn:before {
  content: "";
  display: block;
  height: 18px;
  width: 2px;
  background: #fff;
  position: absolute;
  left: calc(50% - 1px);
  top: 5px;
}

.provas-card-btn.active:before {
  transform: rotate(90deg);
}


}

＆＃13;

<button class="provas-card-btn"></button>
<button class="provas-card-btn"></button>
<button class="provas-card-btn"></button>
<button class="provas-card-btn"></button>

＆＃13;

＆＃13;

＆＃13;