JQuery - CSS - функция - Попытка изменить класс текущего тега

Question

Я буду быстро и просто об этом:

Вот мой HTML

<div id="headerVideoControls" class="overlayElement"> 
    <div id="videoMuteUnmute" onclick="muteUnmuteVideo('headerVideo')">mute button</div> 
</div> 

Отредактировано

<video id="headerVideo" loop muted preload="auto" poster="css\img\headerVideoPreview.jpg"> 
    <source src="uploads/video/headerVideo_2.mp4" type="video/mp4"> 
</video> 

Вот мой JQuery

function muteUnmuteVideo(id) { 
     activeVideo = document.getElementById(id); 
if (activeVideo.muted) { 
    activeVideo.muted = false; 
    $(this).addClass('unMuted'); 
} else { 
    activeVideo.muted = true; 
    $(this).addClass('muted'); 

}} 

То, что я пытаюсь достичь добавления класса к videoMuteUnmute/videoPlayPause, который изменяет фоновое изображение, чтобы показать различные значки для разных стадий немой/не приглушен/воспроизведение/paused Только те вещи, которые работают, являются элементами управления. Но не меняя класс.

Answer 1

У вас есть проблемы с this ключевого слова в muteUnmuteVideo функции.

Функция muteUnmuteVideo определена в глобальном масштабе. Когда вы используете event attributes, например onclick, происходит то, что функция вызывается в этой области видимости, что означает, что ключевое слово this относится к объекту Window. В принципе, это не так, как если бы вы вызывали его вне обработчика событий, он просто выполняет функцию по мере ее определения. У вас есть ссылка на event, но this укажет на объект Window.

У вас есть пара вариантов, в первую очередь, для использования event.target вместо this. event будет ссылаться на элемент, который был нажат. Как это:

$(event.target).addClass('unMuted'); 

Или вы могли бы использовать addEventListener вместо onclick attribute, который рекомендуется, так как он сохраняет свой внешний вид и поведение разделены, что, как правило, лучший подход. Таким образом, this будет ссылаться на элемент, который был нажат. Как это:

document.getElementById('videoMuteUnmute').addEventListener('click', muteUnmuteVideo) 

Вы также можете определить onclick свойство вашего элемента, то this будет относиться к элементу. Как это:

document.getElementById('videoMuteUnmute').onclick = muteUnmuteVideo 

Кроме того, вы можете использовать toggleClass в вашей текущей настройки, как только вы нажмете на кнопке, вы всегда будете иметь оба класса, так как они никогда не удаляются.

Answer 2

Попробуйте, если (activeVideo.muted == верно)

Answer 3

К $(this) вы не отсылая currentVideo объект, используйте следующий код:

function muteUnmuteVideo(id) { 
    activeVideo = $("#"+id); 
    if (activeVideo.muted) { 
     activeVideo.muted = false; 
     activeVideo.addClass('unMuted'); 
    } else { 
     activeVideo.muted = true; 
     activeVideo.addClass('muted'); 
}} 

С $("#"+id) вы получите правильный элемент по идентификатору, а затем изменить свой класс, соответственно.

Примечание:

В случае, если вы используете только addClass(), не снимая его, вы можете иметь оба muted и unMuted классы, поэтому лучше использовать .attr("class", ...):

function muteUnmuteVideo(id) { 
 
    var activeVideo = $("#" + id); 
 
    if (activeVideo.attr("muted") == "true") { 
 
    activeVideo.attr("muted", "false"); 
 
    activeVideo.attr("class", "unMuted"); 
 
    alert("unMuted"); 
 
    } else { 
 
    activeVideo.attr("muted", "true"); 
 
    activeVideo.attr("class", "muted"); 
 
    alert("Muted"); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="headerVideoControls" class="overlayElement"> 
 
    <div id="videoMuteUnmute" onclick="muteUnmuteVideo('headerVideo')">mute button</div> 
 
</div> 
 

 
<video id="headerVideo" loop muted preload="auto" poster="css\img\headerVideoPreview.jpg"> 
 
    <source src="uploads/video/headerVideo_2.mp4" type="video/mp4"> 
 
</video>

И это сделает трюк для вас.