javascript - 使用按钮切换播放器控制 boolean 值

Question

尝试切换BV.getPlayer().muted(true);带有 JavaScript 静音图标的 boolean 值。在出现任何滥用和负面投票之前 - 我在业余时间参加了一个关于 JS 的小型在线类(class)，但我仍然非常非常业余 - html、css 和 php 是我的强项。

这是我所拥有的:

<button class="mute"><i class="fa fa-volume-up"></i></button>
<button class="mute" style="visibility: hidden;"><i class="fa fa-volume-down"></i></button>

<script >
    $(function() {
        var BV = new $.BigVideo();
        BV.init();
        if (Modernizr.touch) {
            BV.show('css/bigvideo.png');
        } else {
            BV.show('vid/one.mp4');
            BV.getPlayer().play();
        }
    });
$(".mute").click(function() {
    // toggle function goes here I believe
});
</script>

此脚本是BigVideo.js基于video.js jQuery 脚本。静音功能如下: BV.getPlayer().muted(true)

有人可以帮我完成这个吗？它需要切换 true 和 false，并更改按钮 i 类 fa-volume-up至fa-volume-down .

虽然这对于一个有经验的 js 负责人来说是一个简单的任务，但对于我来说却不是。我搜索了 StackOverflow、谷歌，甚至回到我的在线类(class)来寻找答案。我不是偶然发现的，经过几个小时的反复试验，我寻求帮助。我希望得到答案并为 future 学习。

Answer 1

如果您可以自由使用JQuery，请查看toggle()正是您所需要的。

但是如果你想练习Javascript

要更改元素的所有类:

document.getElementById("MyElement").className = "MyClass";

向元素添加附加类:

document.getElementById("MyElement").className += " MyClass";

从元素中删除类:

document.getElementById("MyElement").className =
    document.getElementById("MyElement").className.replace
    ( /(?:^|\s)MyClass(?!\S)/g , '' )