Question

我已经编写了以下代码，用于检查带有支票的短划线，所需的切换不会发生：

＆＃13;

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

＆＃13;

<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>

＆＃13;

fa-minus

＆＃13;

另外令人惊讶的是，如果我将fa-check替换为Traceback (most recent call last): File "hart.py", line 82, in <module> with open('datas.json', 'w') as f: File "/Users/admin/Library/Python/2.7/lib/python/site-packages/PIL/Image.py", line 2533, in open raise ValueError("bad mode %r" % mode) ValueError: bad mode 'w'，反之亦然，那么代码似乎有效！

有人可以建议解决这个问题吗？因为我需要第一种方法。

Answer 1

您还需要同时切换fa-minus。实际上，当您添加fa-check时，您正在使用它们，因此一方面会超过另一方。

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

不要使用onclick之类的内联事件处理程序，而是以编程方式附加事件侦听器。此外，您还需要切换.fa-minus，否则您将获得一个看起来像

的元素

<i class="fa fa-minus fa-check"></i>

在这种情况下，无论后来在FA的css获胜中定义了什么类别。

＆＃13;

document.querySelector('.fa.fa-minus').addEventListener('click', function(e) {
  e.target.classList.toggle("fa-check");
  e.target.classList.toggle("fa-minus");
})

＆＃13;

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";

.fa {
  font-size: 50px;
  cursor: pointer;
  user-select: none;
}

.fa:hover {
  color: darkblue;
}

＆＃13;

<i class="fa fa-minus"></i>

＆＃13;

Answer 3

实际上它正在运行，但是fa-check附加到已经存在的classList，所以当你添加fa-check classList成为fa fa-minus fa-check和fa-minus时，优先显示你不能能看到fa-check的效果。只需切换fa-minus，您就会看到输出。请尝试以下。

＆＃13;

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <style>
.fa {
font-size: 50px;
cursor: pointer;
user-select: none;
}

.fa:hover {
color: darkblue;
}
</style>
</head>
<body>

<i onclick="myFunction(this)" class="fa fa-minus"></i>

<script>
function myFunction(x) {
    x.classList.toggle("fa-check");
    x.classList.toggle("fa-minus");
}
</script>

</body>
</html>

＆＃13;

classlist.toggle不适用于fa-check

3 个答案: