javascript - classlist.toggle 不适用于 fa-check

Question

我已经编写了以下代码来通过检查切换破折号，但没有发生所需的切换:

function myFunction(x) {
  x.classList.toggle("fa-check");
}

.fa {
  font-size: 50px;
  cursor: pointer;
  user-select: none;
}

.fa:hover {
  color: darkblue;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i onclick="myFunction(this)" class="fa fa-minus"></i>

同样令人惊讶的是，如果我将 fa-minus 替换为 fa-check 并且反之亦然，代码似乎可以正常工作!

有人可以提出解决方案吗？因为我需要第一种方法才能工作。

Answer 1

您还需要同时切换fa-minus。实际上，当您添加 fa-check 时，您同时拥有它们，所以一个会覆盖另一个。

您还可以依靠 Font Awesome 类来增加大小:

function myFunction(x) {
  x.classList.toggle("fa-check");
  x.classList.toggle("fa-minus");
}

.fa {
  cursor: pointer;
  user-select: none;
}

.fa:hover {
  color: darkblue;
}

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

<i onclick="myFunction(this)" class="fa fa-5x fa-minus"></i>