wordpress 单击按钮时更改图标

vc9ivgsu 于 9个月前发布在 WordPress

关注(0)|答案(1)|浏览(136)

我有一个自定义静音控制按钮的视频.我想点击图标改变.这里是我目前拥有的代码：

<video id="myVideo" loop autoplay muted>
  <source src="https://md-testdomein.nl/partyz/wp-content/uploads/2023/12/WEBVERSIE_169_PartyZ_Brandfilm_V8.01.mp4">
</video>

<button id="mute-button" onclick="muteToggle();" type="button">
    <i id="mute-button-icon" class="fa fa-volume-up"></i>
</button>

<script>
function muteToggle() {

    let vid=document.getElementById("myVideo");
    
    let element = document.getElementById("mute-button-icon");

    if(vid.muted){
        vid.muted = false;
        element.classList.toggle("fa-volume-up");
    } else {
        vid.muted = true;
        element.classList.toggle("fa-volume-off");
    }
}
</script>

字符串
您可以在这里预览按钮：https://md-testdomein.nl/partyz/
按钮图标确实改变了，但我第一次点击它时，图标消失了，第二次图标'fa-volume-off'出现了，第三次图标'fa-volume-up'出现了。
音频关闭时应显示“fa-volume-up”图标，音频打开时应显示“fa-volume-off”图标。
这个应该很简单，但是我想不通。有人能帮我修一下吗？

wordpress

来源：https://stackoverflow.com/questions/77653339/change-icon-on-button-click

1条答案

按热度按时间

dba5bblo1#

代码中的问题是因为你只切换了其中一个类。你需要同时切换它们，这样旧的类就被删除了 *，新的类就被添加了 *。
您还可以简化视频静音的逻辑，并通过将事件处理程序绑定移动到JS而不是HTML中来提高代码质量。
这里有一个工作示例。请注意，我只是缩小了视频的大小，以便它更适合片段预览。

const vid = document.querySelector('#myVideo');
const muteIcon = document.querySelector('#mute-button-icon');

document.querySelector('#mute-button').addEventListener('click', e => {
  vid.muted = !vid.muted;
  muteIcon.classList.toggle('fa-volume-up');
  muteIcon.classList.toggle('fa-volume-off');
});

video { width: 300px; }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<video id="myVideo" loop autoplay muted>
  <source src="https://md-testdomein.nl/partyz/wp-content/uploads/2023/12/WEBVERSIE_169_PartyZ_Brandfilm_V8.01.mp4">
</video>

<button id="mute-button" type="button">
  <i id="mute-button-icon" class="fa fa-volume-off"></i>
</button>

赞(0）回复(0）举报 8个月前

我来回答

wordpress 单击按钮时更改图标

1条答案

相关问题

热门标签

最新问答