由于字符串字符无效，Fontawesome 无法更改 class

Question

const toggleDarkOrLight = document.getElementsByTagName('i')[0];
var toggled = false;
const toggle = () => {
  if (toggled === false) {
    toggleDarkOrLight.classList.remove('fa fa-toggle-off');
    toggleDarkOrLight.classList.add('fa fa-toggle-on');
  } else {
    toggleDarkOrLight.classList.remove('fa fa-toggle-on');
    toggleDarkOrLight.classList.add('fa fa-toggle-off');
  }
}

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-toggle-off" onclick="toggle()"></i>
</body>
<html>

为什么我不能更改 class？是不是因为“-”字

那我应该尝试什么？

此外，我怎样才能像流畅的动画一样打开和关闭开关（或者我不能？）

Answer 1

不，是 space。 classList.add/.remove 期望单个 class 名称和 class 名称可能不包含 space。为了 add/remove 多个 classes，但它们在不同的参数中：

toggleDarkOrLight.classList.remove('fa', 'fa-toggle-off');
toggleDarkOrLight.classList.add('fa', 'fa-toggle-on');

（或者只留下 fa，因为您既要添加又要删除它。）

Answer 2

干扰的是 space( )！

既然你添加和删除了 fa class，那就顺其自然吧。

也就是说，考虑使用 classList.contains 来检查 class 您想要切换。

const toggleDarkOrLight = document.getElementsByTagName('i')[0];

const toggle = () => {
  if (toggleDarkOrLight.classList.contains('fa-toggle-off')) {
    toggleDarkOrLight.classList.remove('fa-toggle-off');
    toggleDarkOrLight.classList.add('fa-toggle-on');
  } else {
    toggleDarkOrLight.classList.remove('fa-toggle-on');
    toggleDarkOrLight.classList.add('fa-toggle-off');
  }
}

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-toggle-off" onclick="toggle()"></i>
</body>
<html>

Answer 3

您实际上根本不想切换 fa 部分。您只想切换 fa-toggle-off/on 部分。您的代码应如下所示：

const toggleDarkOrLight = document.getElementsByTagName("i")[0];
      var toggled = false;
      const toggle = () => {
        if (toggled === false) {
          toggleDarkOrLight.classList.remove("fa-toggle-off");
          toggleDarkOrLight.classList.add("fa-toggle-on");
          toggled = true;
        } else {
          toggleDarkOrLight.classList.remove("fa-toggle-on");
          toggleDarkOrLight.classList.add("fa-toggle-off");
          toggled = false;
        }
      };

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-toggle-off" onclick="toggle()"></i>
</body>
<html>

由于字符串字符无效，Fontawesome 无法更改 class

Fontawesome can't change the class because of invalid string characters

html

javascript

css

font-awesome