Javascript 查找特定的子元素并更改类名

我试图在按钮内的范围内切换类名。我使用的是原生javaScript

如何找到button的子元素并切换类

我想在

中切换

字形图标音量增大

和

字形图标音量关闭

这就是我一直在尝试的：

 function changeButtonType(btn, value) {
   btn.title = value;
   btn.className = value;
   btn.setAttribute("aria-label", value);
   var span = document.getElementById(btn).children;
   //span[1].className = value;
   //var glyph = '<span aria-hidden="true" class="glyphicon glyphicon-'+value+'"></span>';
   //span.innerHTML = glyph;
   //el.appendChild(span);
 }

函数更改按钮类型（btn，值）{
btn.title=值；
btn.className=值；
btn.setAttribute（“aria标签”，值）；
var span=document.getElementById（btn）.children；
//span[1]。className=value；
//var glyph=''；
//span.innerHTML=字形；
//el.appendChild（span）；
}

Html:

看

---

非常感谢。

您可以定义一个类数组（

类

）来进行切换，这里的类是两个图示符图标：

const classes = ["glyphicon-volume-off", "glyphicon-volume-up"];

使用此代码：

const index_b = span.classList.contains(classes[0]);
span.classList.remove(classes[+!index_b]);
span.classList.add(classes[+index_b]);

单击按钮时，可以在阵列中定义的两个图示符图标之间切换。此外，我建议将代码移动到

标记的底部（这可以在小提琴设置中完成），或者为

DOMContentLoaded

添加事件侦听器，以便代码知道如何引用其中的元素

请参见下面的工作示例：

var mediaPlayer=document.getElementById（'video'）；
var muteBtn=document.getElementById（'mute-button'）；
常量类=[“glyphicon音量关闭”，“glyphicon音量上升”]；
函数changeButtonType（btn，值）{
btn.title=值；
btn.className=值；
btn.setAttribute（“aria标签”，值）；
var span=document.getElementById（btn.id）.children[0]；
const index_b=span.classList.contains（类[0]）；
span.classList.remove（类[+！索引_b]）；
span.classList.add（类[+index_b]）；
}
函数toggleMute（）{
如果（mediaPlayer.mute）{
//将cutton更改为静音按钮
changeButtonType（muteBtn，“音量关闭”）；
//取消媒体播放器的静音
mediaPlayer.mute=false；
}否则{
//将按钮更改为取消静音按钮
changeButtonType（muteBtn，“音量增大”）；
//使媒体播放器静音
mediaPlayer.mute=true；
}
}

您可以使用检索范围，然后使用其属性删除/添加类

var span = btn.querySelector('.glyphicon');
span.classList.remove('glyphicon-volume-off', 'glyphicon-volume-up');
span.classList.add('glyphicon-' + value);

工作演示（请参见视频下方的静音按钮）：

var mediaPlayer=document.getElementById（'video'）；
var muteBtn=document.getElementById（'mute-button'）；
函数changeButtonType（btn，值）{
btn.title=值；
btn.className=值；
btn.setAttribute（“aria标签”，值）；
var span=btn.querySelector（'.glyphicon'）；
span.classList.remove（'glyphicon-volume-off'、'glyphicon-volume-up'）；
span.classList.add（'glyphicon-'+值）；
}
函数toggleMute（）{
如果（mediaPlayer.mute）{
//将cutton更改为静音按钮
changeButtonType（muteBtn，“音量关闭”）；
//取消媒体播放器的静音
mediaPlayer.mute=false；
}否则{
//将按钮更改为取消静音按钮
changeButtonType（muteBtn，“音量增大”）；
//使媒体播放器静音
mediaPlayer.mute=true；
}
}

哑巴

再创建一个取消静音按钮，并将其样式保持为显示：无，然后在切换功能中相应地更改可见性

var mediaPlayer = document.getElementById('video');
 var muteBtn = document.getElementById('mute-button');
 var unmuteBtn = document.getElementById('unmute-button');


 function toggleMute() {
   if (mediaPlayer.muted) {
     // Change the button to be a mute button
     unmuteBtn.style.display='block';
     muteBtn.style.display='none';
     // Unmute the media player
     mediaPlayer.muted = false;
   } else {
     // Change the button to be an unmute button
     muteBtn.style.display='block';
     unmuteBtn.style.display='none';
     // Mute the media player
     mediaPlayer.muted = true;
   }
 }

---

请参见

我通常支持单独的js解决方案，不使用OneEvent处理程序，但如果这就是您想要的（打开/关闭），那么这就可以了：

<video id="video" autoplay muted>
<source src="https://addpipe.com/sample_vid/short.mp4" />
</video>
<button type="button" id="mute-button" class="mute" title="Unmute" onclick="var e = this.firstElementChild; e.className = e.matches('[class*=up]') ? 'glyphicon glyphicon-volume-off' : 'glyphicon glyphicon-volume-up'">
    <span class="glyphicon glyphicon-volume-up" aria-hidden="true"></span>
</button>

---

)

谢谢你。我让它和你的代码一起工作。我想知道为什么我的问题被否决了，尽管。。。

<video id="video" autoplay muted>
<source src="https://addpipe.com/sample_vid/short.mp4" />
</video>
<button type="button" id="mute-button" class="mute" title="Unmute" onclick="var e = this.firstElementChild; e.className = e.matches('[class*=up]') ? 'glyphicon glyphicon-volume-off' : 'glyphicon glyphicon-volume-up'">
    <span class="glyphicon glyphicon-volume-up" aria-hidden="true"></span>
</button>