我想要创建点击的脸是标记和其他面孔是默认的颜色在第二次点击

Question

我有一个反馈部分，一旦一张脸被点击，它就会被标记为一种特定的颜色，而其他面孔被默认为第二种颜色，以防用户点击另一张脸(如果他改变主意)。

​

function feedback(tab_number) {
  document.getElementById('feedback-' + tab_number).classList.add('clicked');
}

.feedback {
  /*background-color: darkgray;*/
  padding: 10px;
  width: fit-content;
}

i {
  margin: 10px;
  /*color: gold;*/
}

.default {
  color: black;
}

.clicked {
  color: gold;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />

<div class="feedback">
  <i class="fas fa-angry fa-5x " id="feedback-1" onclick="feedback(1)"></i>

  <i class="fas fa-frown-open fa-5x " id="feedback-2" onclick="feedback(2)"></i>

  <i class="fas fa-smile fa-5x " id="feedback-3" onclick="feedback(3)"></i>

  <i class="fas fa-grin-stars  fa-5x " id="feedback-4" onclick="feedback(4)"></i>
</div>

​

Answer 1

你的问题不太清楚，但我想你的意思可能是：

​

function feedback(tab_number) {
  let clicked = document.querySelector("i.clicked");
  if (clicked) {
    clicked.classList.remove("clicked");
  }

  document.getElementById("feedback-" + tab_number).classList.add("clicked");
}

.feedback {
  /*background-color: darkgray;*/
  padding: 10px;
  width: fit-content;
}

i {
  margin: 10px;
  /*color: gold;*/
}

.default {
  color: black;
}

.clicked {
  color: gold;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />

<div class="feedback">
  <i class="fas fa-angry fa-5x " id="feedback-1" onclick="feedback(1)"></i>
  <i class="fas fa-frown-open fa-5x " id="feedback-2" onclick="feedback(2)"></i>
  <i class="fas fa-smile fa-5x " id="feedback-3" onclick="feedback(3)"></i>
  <i class="fas fa-grin-stars  fa-5x " id="feedback-4" onclick="feedback(4)"></i>
</div>

​

因此，当您单击另一张脸时，前面突出显示的脸将从他们的类列表中删除他们的clicked类，并将其添加到新单击的face的类列表中。

Answer 2

您可以通过检查element.classList.contains('clicked')是否可以做到这一点。如果是这样的话，那么它已经被点击了，然后您需要删除类clicked，否则添加它。

见下文：

注意:我进一步编辑了，以提供自动将类clicked移除和添加到其他faces的功能。

​

function feedback(tab_number) {	
  let clickedElem = document.getElementById('feedback-' + tab_number);
  let add = false;
  
  if( !clickedElem.classList.contains('clicked') ) {
    add = true;
  }
  
  let elems = document.querySelectorAll(".feedback i");
  
  elems.forEach(function(el) {
    let currTabNum = el.id.substr(9, el.id.length);  // get the tab number
    
    if(add && currTabNum <= tab_number) {
      document.getElementById('feedback-' + currTabNum).classList.add('clicked');
    } else if(!add && currTabNum >= tab_number) {
      document.getElementById('feedback-' + currTabNum).classList.remove('clicked');
    }
  });
}

.feedback {
  /*background-color: darkgray;*/
  padding: 10px;
  width: fit-content;
}

i {
  margin: 10px;
  /*color: gold;*/
}

.default {
  color: black;
}

.clicked {
  color: gold;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>

<div class="feedback">
  <i class="fas fa-angry fa-5x " id="feedback-1" onclick="feedback(1)"></i>
  <i class="fas fa-frown-open fa-5x "  id="feedback-2" onclick="feedback(2)"></i>
  <i class="fas fa-smile fa-5x " id="feedback-3" onclick="feedback(3)"></i>
  <i class="fas fa-grin-stars  fa-5x " id="feedback-4" onclick="feedback(4)"></i>
</div>

​

注意：

Answer 3

看看这个：

function feedback(tab_number){

  document.getElementById('feedback-1').classList.remove('clicked');
  document.getElementById('feedback-2').classList.remove('clicked');
  document.getElementById('feedback-3').classList.remove('clicked');
  document.getElementById('feedback-4').classList.remove('clicked');

  document.getElementById('feedback-' + tab_number).classList.add('clicked');


}