Question

我几乎试图使两个图标（音量增大）（音量静音）在按下时在两个图标之间切换我可以使两个图标相互重叠但我相信我需要使用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。

Answer 1

首先，获取元素并创建变量以了解是否显示了静音或取消静音

var mute = document.getElementById("mute");
var unmute = document.getElementById("unmute");
var isMute = false;

创建功能以更改外观；

function toggleMute() {
    // inverse boolean
    isMute = !isMute;
    if (isMute) {
        mute.style.display = "none";
        unmute.style.display = "block";
    } else {
        mute.style.display = "block";
        unmute.style.display = "none";
    }
}

并添加事件监听器

mute.addeventListener("click", toggleMute);
unmute.addeventListener("click", toggleMute);

如果您使用很棒的字体，则可以尝试仅创建一个元素并在单击时更改类。

编辑

默认情况下，在CSS中，您需要在无显示中设置取消静音

编辑2

要使音频静音或取消静音，可以使用pause function。

Answer 2

没有2个链接，而是只有1个并切换类。

下面是一个简单的例子。

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>

单击更改Fa图标

2 个答案: