Javascript jQuery-CSS-function-尝试更改当前标记的类

关于这一点，我将简单明了：

这是我的HTML

我试图实现的是将类添加到videoMuteUnmute/videoPlayPause，以更改背景图像，为不同阶段显示不同的图标静音/未静音/播放/暂停

---

唯一起作用的是控件。但不要更改类。

如果（activeVideo.mute==true）

您的

muteUnmuteVideo

函数中的

这个
关键字有问题，请尝试

您的
muteUnmuteVideo
函数在全局范围内定义。当您使用
事件属性
如
onclick
时，发生的情况是在该范围内调用函数，这意味着
this
关键字引用窗口对象。基本上，它与在事件处理程序外部调用它没有什么不同，它只是按照定义执行函数。您有一个对
事件的引用
，但
此
将指向窗口对象

您有两种选择，第一种是使用
event.target
而不是
this
。
事件将引用已单击的元素。像这样：

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

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

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

或者，您可以使用
addEventListener
而不是
onclick属性
，这是推荐的，因为它将布局和行为分开，这通常是一种更好的方法。这样，
此
将引用已单击的元素。像这样：

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

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

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

您还可以定义元素的
onclick
属性，然后
此
将引用该元素。像这样：

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

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

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

此外，您可能需要使用
切换类
，在当前设置中，一旦单击按钮，您将始终拥有这两个类，因为它们从未被删除。
通过
$（此）
如果您不是指
当前视频
对象，请使用以下代码：

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

使用
$（“#”+id）
可以按id获得正确的元素，然后相应地更改其类

注意：

如果只使用
addClass（）
而不删除它，则可以同时使用
mute
和
unmute
类，因此最好使用
.attr（“类”，…）
：


功能静音视频（id）{
var activeVideo=$（“#”+id）；
if（activeVideo.attr（“静音”）=“true”）{
attr（“静音”、“假”）；
attr（“class”，“unmute”）；
警报（“非静音”）；
}否则{
attr（“静音”、“真”）；
attr（“类”、“静音”）；
警惕（“静音”）；
}
}

静音按钮
id为HeaderServiceDeo的元素在哪里？
忘了，抱歉！代码仅与=一起工作，但与==视频未被静音，但addClass（）不工作。实际上，我试图在您的if语句中检查（activeVideo.muted==true）是否工作，而不仅仅是（activeVideo.muted）…这实际上是被禁用的。我使用了“$（event.target）.addClass（'unmute'）；”