时间戳

首页 > 解决方案 > 单击更改 Fa 图标

javascript - 单击更改 Fa 图标

问题描述

https://codepen.io/LukzzXB/pen/xNwwJL

我几乎试图让两个图标（fa 音量增大）（fa 音量静音）在按下时在两者之间切换我可以让两个图标相互重叠但我相信我需要 javascript 来做到这一点我试图使用“切换”功能等，但有点麻烦谢谢

<a href="#noscroll" id="mute"><i class="fas fa-volume-up fa-3x"></a></i>
        <a href="#noscroll"id="unmute"><i class="fas fa-volume-off fa-3x"></a></i>

所以我非常想让图标改变onclick。

标签： javascripthtmlcss

解决方案

与其拥有 2 个链接，不如只拥有一个并切换类。

下面是一个简单的例子..

const muter = document.querySelector("#muter");

muter.addEventListener("click", (e) => {
  ["fa-volume-up", "fa-volume-off"].forEach(
    c => e.target.classList.toggle(c));
});
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">


<a href="#noscroll" id="muter">
  <i class="fas fa-volume-up fa-3x"></i>
</a>

推荐阅读