javascript - 更改类名时 CSS 不会更改

标签 javascript css html media

我正在使用 HTML5 媒体 API 并停留在它的静音属性上。我有一个静音按钮,每当我单击它时,我都想用它来静音和取消静音特定视频的音频。问题是每当我将它静音时它都会工作,但我无法取消静音。类和标题值已正确设置为适当的值,但音量或图标图像没有变化。这是我的 jsfiddle 代码的链接 http://jsfiddle.net/7AS3C/1/当我将代码上传到 jsfiddle 时,CSS 问题没有发生。如果有人帮助我解决 javascript 问题,我将不胜感激。

<div id="mediaplayer">
    <video id="media-video" controls>
        <source src='http://video.webmfiles.org/big-buck-bunny_trailer.webm' type='video/webm' controls>
    </video>
    <div>
        <div id="media-controls">
            <progress id="progress-bar" min="0" max="100" value="0"></progress>
            <button id='replay-button' class='replay' title='replay' onclick='replayMedia();'>Replay</button>
            <button id='play-pause-button' class='play' title='play' onclick='togglePlayPause();'>Play</button>
            <button id='stop-button' class='stop' title='stop' onclick='stopPlayer();'>Stop</button>
            <button id='volume-inc-button' class='volume-plus' title='increase volume' onclick='changeVolume("+");'>Increase volume</button>
            <button id='volume-dec-button' class='volume-minus' title='decrease volume' onclick='changeVolume("-");'>Decrease volume</button>
            <button id='mute-btn' class='mute' title='mute' onclick='toggleMute();'>Mute</button>
        </div>
    </div>
</div>

这是CSS

.unmute {
    width:45px;
    height:48px;
    background:url('mute.png');
    background-position: 0px 0px;
}
.mute {
    width:45px;
    height:48px;
    background:url('unmute.png');
    background-position: 0px 0px;
}

这是我的javascript

muteBtn = document.getElementById('mute-btn');

function toggleMute() {
    if (player.muted = false) {
        changeButtonType(muteBtn, 'mute');
        player.muted = "true";
    } else if (player.muted = true) {
        changeButtonType(muteBtn, 'unmute');
        player.muted = "false";

    } else player.muted = "false";
}

function changeButtonType(buttonType, value) {
    buttonType.title = value;
    buttonType.innerHTML = value;
    buttonType.className = value;
}

最佳答案

条件逻辑是赋值而不是比较

if (player.muted = false) {

应该是

if (player.muted === false) {

player.muted = "true"; 

应该是

player.muted = true;

同样适用于假 block

关于javascript - 更改类名时 CSS 不会更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15551560/

相关文章:

javascript - 从客户端检测到潜在危险的 Request.Path 值 (:)

javascript - 使用 Electron 和 node.js 应用程序的 easy-ftp 中的文件上传错误

javascript - 如何在此脚本中设置自动 slider 功能?

div 中的 HTML CSS ul 和 li

html - 在 HTML/CSS 中创建三列

javascript - 鼠标/触摸坐标在错误的位置 HTML Canvas

html - 悬停时的 CSS 向左展开元素

javascript - CSS - 在打印中设置当前页的结尾

javascript - 测试在浏览器中有效,但在 PhantomJS 中无效

html - 宽度为 100% 的 svg 三 Angular 形