更改班級名稱時CSS不會更改

我正在使用HTML5媒體API，並堅持使用它的靜音屬性。我有這個靜音按鈕，我想用它來靜音和取消靜音特定視頻的音頻，每當我點擊它。問題在於，只要我將其設爲靜音，它就可以工作，但我無法取消靜音。類和標題值會正確設置爲適當的值，但音量或圖標圖像沒有變化。這是我的jsfiddle代碼的鏈接http://jsfiddle.net/7AS3C/1/當我將代碼上傳到jsfiddle時，CSS問題不會發生。如果有人幫我用JavaScript，我會非常感激。更改班級名稱時CSS不會更改

<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; 
}

來源

2013-03-21 Bazinga777

你肯定的類適當改變？聽起來不像。有演示？ – isherwood 2013-03-21 15:25:57

對不起，我在我的電腦上。如果有人沒有答案，請嘗試將其上傳到JSFiddle。此外，類名稱正確更改，我使用相同的功能來更改其他類的類名稱，他們工作得很好。 – Bazinga777 2013-03-21 15:30:01

執行一些日誌記錄（'console.log（）'）來確定是否在靜音和非靜音事件上實際觸發'changeButtonType（）'。 – 2013-03-21 15:37:26

有條件的邏輯分配，而不是比較

if (player.muted = false) {

應該

if (player.muted === false) {

和

player.muted = "true";

應該

player.muted = true;

同樣適用於假模塊

來源

2013-03-21 15:36:38 jagzviruz

我怎麼會錯過？這解決了這個問題，非常感謝。我想我應該更好地看看我的代碼。 – Bazinga777 2013-03-21 15:52:59

在開始時你需要指定'player.muted = false'否則player.muted將被undefined – jagzviruz 2013-03-21 15:59:29

謝謝，我會這麼做的。 – Bazinga777 2013-03-21 16:17:30

更改班級名稱時CSS不會更改

回答

相關問題