CSS не меняется при изменении имени класса

Я работаю с API-интерфейсом HTML5 и придерживаюсь его немого свойства. У меня есть эта кнопка отключения звука, которую я хочу использовать для отключения звука и включения звука для конкретного видео всякий раз, когда я его нажимаю. Проблема в том, что она работает всякий раз, когда я отключаю ее, но я не могу ее отключить. Значения классов и заголовков правильно установлены на соответствующие значения, но нет изменений в томе или изображении значка. Вот ссылка на мой код jsfiddle http://jsfiddle.net/7AS3C/1/ Проблема с CSS не возникает, когда я загрузил код в jsfiddle. Был бы очень признателен, если бы кто-то помог мне с 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

Извините, у меня это на моем компьютере. Если у кого-то нет ответа, попробуйте загрузить его в JSFiddle. Кроме того, имена классов изменены правильно, я использую одну и ту же функцию для изменения имен классов других классов, и они работают нормально. – Bazinga777

Сделайте несколько протоколирования ('console.log()'), чтобы определить, действительно ли 'changeButtonType()' запускается как при отключении, так и при отключении. –

условная логика назначая вместо сравнения

if (player.muted = false) {

должен быть

if (player.muted === false) {

player.muted = "true";

должен быть

player.muted = true;

То же справедливо и для ложного блока

источник

2013-03-21 15:36:38 jagzviruz

Как я мог пропустить это? Это исправляет проблему, спасибо большое. Думаю, я должен лучше рассмотреть мой код. – Bazinga777

В начале вам нужно назначить 'player.muted = false' else player.muted будет undefined – jagzviruz

спасибо, я сделаю это. – Bazinga777

CSS не меняется при изменении имени класса

ответ

Смежные вопросы