Question

我正在尝试在按钮内的范围内切换类名称。我正在使用本机javaScript。

如何找到按钮的子元素并切换类？

我想在glyphicon-volume-up中切换glyphicon-volume-off和<span>。

这是我一直在尝试的：

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

HTML：

<button type="button" id="mute-button" class="mute" title="Unmute" onclick="toggleMute();">
    <span class="glyphicon glyphicon-volume-up" aria-hidden="true"></span>
</button>

请参见fiddle here。

非常感谢您。

Answer 1

您可以定义一系列的类（classes）来进行切换，这里的类是您的两个字形图标：

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]);

单击按钮时，可以在数组中定义的两个字形图标之间切换。另外，我建议将代码移到<body>标记的底部（可以在小提琴设置中完成）或添加DOMContentLoaded的事件侦听器，以使您的代码知道如何引用元素在里面。

请参见下面的工作示例：

var mediaPlayer = document.getElementById('video');
var muteBtn = document.getElementById('mute-button');


const classes = ["glyphicon-volume-off", "glyphicon-volume-up"];

function changeButtonType(btn, value) {
  btn.title = value;
  btn.className = value;
  btn.setAttribute("aria-label", value);
  var span = document.getElementById(btn.id).children[0];

  const index_b = span.classList.contains(classes[0]);
  span.classList.remove(classes[+!index_b]);
  span.classList.add(classes[+index_b]);
}

function toggleMute() {
  if (mediaPlayer.muted) {
    // Change the cutton to be a mute button
    changeButtonType(muteBtn, 'volume-off');
    // Unmute the media player
    mediaPlayer.muted = false;
  } else {
    // Change the button to be an unmute button
    changeButtonType(muteBtn, 'volume-up');
    // Mute the media player
    mediaPlayer.muted = true;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<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="toggleMute();">
    <span class="glyphicon glyphicon-volume-off" aria-hidden="true"></span>
</button>

请参见js fiddle example here

Answer 2

您可以使用Element.querySelector来检索跨度，然后使用其classList属性为其添加/删除类。

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');

function changeButtonType(btn, value) {
  btn.title = value;
  btn.className = value;
  btn.setAttribute("aria-label", value);

  var span = btn.querySelector('.glyphicon');
  span.classList.remove('glyphicon-volume-off', 'glyphicon-volume-up');
  span.classList.add('glyphicon-' + value);
}

function toggleMute() {
  if (mediaPlayer.muted) {
    // Change the cutton to be a mute button
    changeButtonType(muteBtn, 'volume-off');
    // Unmute the media player
    mediaPlayer.muted = false;
  } else {
    // Change the button to be an unmute button
    changeButtonType(muteBtn, 'volume-up');
    // Mute the media player
    mediaPlayer.muted = true;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<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="toggleMute();">
    <span class="glyphicon glyphicon-volume-up" aria-hidden="true">MUTE</span>
</button>

Answer 3

再创建一个按钮以取消静音，并将其样式保留为display:none，然后在切换功能中相应地更改可见性，

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 fiddle demo here

Answer 4

通常，我赞成使用单独的js解决方案，而没有onevent处理程序，但是如果您只想这样做（切换开/关），则可以这样做：

function scan() {
        return new Promise((resolve, reject) => {
            iwlist.scan({
                iface: 'wlp1s0',
                show_hidden: true
            },
                function (err, networks) {
                    if (err) {
                        return reject(err);
                    }
                    return resolve(networks);
                }
            );
        });

    }

    const http = require('http');

    const hport = 8080;
    const haddr = "localhost";
    const Server = http.createServer(async (req, res) => {
        try {
            var n = await scan();
            res.write(n);
            res.end();
        }
        catch (error) {
            res.write(error);
        }
    });

Here;

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

4 个答案: