静音/取消静音图标 js fontawesome [关闭]答案

【问题标题】：mute/unmute icon js fontawesome [closed]静音/取消静音图标 js fontawesome [关闭]
【发布时间】：2022-02-10 02:04:05
【问题描述】：

我的函数应该将图标更改为静音或取消静音，但有时会说该类未定义。我不知道为什么。

var i = document.getElementById("sound")
var unmute = false

function change() {
  console.log(i.className)
  if (unmute == false) {
    i.className = "fas fa-volume volumen"
    console.log("unmute")
    unmute = true;
  } else {
    i.className = "fas fa-volume-mute volumen"
    console.log("mute")
    unmute = false
  }

}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<strike>
    <i id="sound" onclick="change()" class="fas fa-volume-mute volumen"></i>
<strike>

【问题讨论】：

请阅读How to Ask，尤其是“写一个总结具体问题的标题”部分（当前标题是单词和产品名称的混搭）
另外，如果您遇到错误，请包含整个错误文本。
为什么要设置 className 而不是 class（或添加到 classList）？您是否使用纯 JS/HTML/CSS 以外的其他系统？
我已经更新了类名以适应我添加的 CDN 库。
另请注意，列表项必须是列表的子项。见developer.mozilla.org/en-US/docs/Web/HTML/Element/li。（我删除了该标记，因为它与此处无关。）

标签： javascript html firefox

【解决方案1】：

这没有任何意义，但它对我有用

var unmute = false
function change(){
let sound = document.getElementById("sound")
console.log(sound.className);
if(unmute == false){
sound.className ="fal fa-volume volumen"
console.log("unmute")
unmute = true;
     }
else{
      sound.className ="fal fa-volume-mute volumen"
      console.log("mute")
      unmute = false
    }

    }

【讨论】：

【解决方案2】：

尝试将 i 的声明放入函数中。

var unmute = false;

function change() {
    let i = document.getElementById("sound");
    console.log(i.className)

    if (unmute == false) {
        i.className = "fal fa-volume volumen";
        console.log("unmute");
        unmute = true;
    } else {
        i.className = "fal fa-volume-mute volumen";
        console.log("mute");
        unmute = false;
    }
}

你打算在其他函数中使用变量 unmute 吗？如果没有，您可以尝试这样做：

function change() {
    let i = document.getElementById("sound");
    let current_class = i.className;
    
    current_class = current_class == "fal fa-volume-mute volumen" ? "fal fa-volume volumen" : "fal fa-volume-mute volumen";
}

您还可以使用 jQuery 在类名之间切换：

$("#sound").on('click', function(){
    $("#sound", this)
         .toggleClass("fal fa-volume volumen")
         .toggleClass("fal fa-volume-mute volumen");
});

【讨论】：