当我选择另一个元素时如何删除一个类列表？答案

【问题标题】：how to remove a classList when I select another element?当我选择另一个元素时如何删除一个类列表？
【发布时间】：2022-01-08 06:42:47
【问题描述】：

当我单击“冒名顶替者”时，我希望它变成灰色并带有一些文本，正如您在我的 CSS 中使用选择器 .imposter.voted 看到的那样。但是当我点击另一个冒名顶替者时，我希望那个冒名顶替者显示为灰色，而前一个冒名顶替者再次像往常一样显示。

当我尝试this.classList.remove("voted") 时，它不起作用，它只会使我选择的所有冒名顶替者变成灰色。该类不会被删除。我看不出哪里出错了。

imposters = document.querySelectorAll(".imposter");

for (let i = 0; i < imposters.length; i++) {
  imposters[i].addEventListener("click", function() {
    this.classList.add("voted");
  });
}

.imposter.voted {
  background-color: gray;
  position: relative;
  opacity: 0.7;
}

.imposter.voted::after {
  content: "I voted";
  position: absolute;
  top: 5px;
  right: 5px;
  display: inline-block;
  font-family: "Comic Sans Ms";
  color: red;
}

.imposters__voting {
  text-align: right;
}

<main class="dashboard">
  <h1>Who Is The Imposter?</h1>
  <div class="imposters">
    <div class="imposter">Baba</div>
    <div class="imposter">Baraki</div>
    <div class="imposter">Garfield</div>
    <div class="imposter">Erik</div>
    <div class="imposter">GreenBlood4</div>
    <div class="imposter">Easter</div>
  </div>
</main>

【问题讨论】：

您的脚本中没有this.classList.remove("voted")。请添加一个实际的minimal reproducible example。

标签： javascript html css class

【解决方案1】：

只需从所有div.imposter 中删除.voted（如果存在），然后将.voted 类添加到单击的元素。

imposters = document.querySelectorAll(".imposter");

for (let i = 0; i < imposters.length; i++) {
  imposters[i].addEventListener("click", function() {
    var count = 0;
    while(count<imposters.length){
      imposters[count++].classList.remove('voted');
    }
    this.classList.add("voted");
  });
}

.imposter.voted {
  background-color: gray;
  position: relative;
  opacity: 0.7;
}

.imposter.voted::after {
  content: "I voted";
  position: absolute;
  top: 5px;
  right: 5px;
  display: inline-block;
  font-family: "Comic Sans Ms";
  color: red;
}

.imposters__voting {
  text-align: right;
}

<main class="dashboard">
  <h1>Who Is The Imposter?</h1>
  <div class="imposters">
    <div class="imposter">Baba</div>
    <div class="imposter">Baraki</div>
    <div class="imposter">Garfield</div>
    <div class="imposter">Erik</div>
    <div class="imposter">GreenBlood4</div>
    <div class="imposter">Easter</div>
  </div>
</main>

【讨论】：

【解决方案2】：

您可以在变量currentIndex 中记住当前选择的冒名顶替者的索引。然后点击后你需要通过其余的冒名顶替者并删除类voted。

let imposters = document.querySelectorAll(".imposter");

let currentIndex = null;

for (let i = 0; i < imposters.length; i++) {
  imposters[i].addEventListener("click", function() {
    this.classList.add("voted");
    
    currentIndex = i;
    
    imposters.forEach(function(imposter, index){
        if(index != currentIndex) {
            imposter.classList.remove("voted"); 
        }
    });
  });
}

.imposter.voted {
  background-color: red;
  position: relative;
  opacity: 0.7;
}

.imposter.voted::after {
  content: "I voted";
  position: absolute;
  top: 5px;
  right: 5px;
  display: inline-block;
  font-family: "Comic Sans Ms";
  color: red;
}

.imposters__voting {
  text-align: right;
}

<main class="dashboard">
  <h1>Who Is The Imposter?</h1>
  <div class="imposters">
    <div class="imposter">Baba</div>
    <div class="imposter">Baraki</div>
    <div class="imposter">Garfield</div>
    <div class="imposter">Erik</div>
    <div class="imposter">GreenBlood4</div>
    <div class="imposter">Easter</div>
  </div>
</main>

【讨论】：