使用onclick函数更改Bootstrap图标

Question

我想要将Bootstrap图标bi bi-caret-right-fill更改为bi bi-caret-down-fill。

<i onclick="myFunction(this)" class="bi bi-caret-right-fill"></i>

function myFunction(x) {
   x.classList.toggle("bi bi-arrow-down-circle");
}

- Arya

---

toggle 方法会移除一个已经设置的类。你不想移除 bi 类，所以它根本不应该在这里。你想要切换 bi-caret-right-fill（已经设置，需要被移除）和 bi-arrow-down-circle（尚未设置，需要被添加）。 - CBroe

因此，为了不依赖于fa css中的顺序，应该这样写：x.classList.toggle("bi-caret-right-fill"); x.classList.toggle("bi-arrow-down-circle");。 - freedomn-m

请注意，classList.toggle 不允许同时添加多个类名，你必须（费力地）一个一个地添加。 - freedomn-m

Answer 1

在你的情况下，你需要这样做

希望这能帮到你

function myFunction(x) {
   x.classList.toggle("bi-caret-right-fill"); 
   x.classList.toggle("bi-arrow-down-circle"); 
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<i onclick="myFunction(this)" class="bi bi-caret-right-fill"></i>

- Nirav Joshi

---

.classList.toggle("singleClass") 可以正常工作，您不必使用add/remove。这个链接展示了它的工作状态。 - freedomn-m

是的，@freedomn-m，如果你想的话，你可以发布答案。 - Nirav Joshi

Answer 2

试试这个：

<i onclick="myFunction(this)" class="bi bi-caret-right-fill"></i>

function myFunction(x) {
  if (x.classList.contains("bi-caret-right-fill")) {
    x.classList.remove("bi-caret-right-fill");
    x.classList.add("bi-arrow-down-circle");
  } else if (x.classList.contains("bi-arrow-down-circle")) {
    x.classList.add("bi-caret-right-fill");
    x.classList.remove("bi-arrow-down-circle");
  }
}

- user18529574