更改按钮标签内的span标签onClick上的类

Question

 <button class="btn btn-primary" onclick="wavesurfer.playPause()" type="button">
<span class="glyphicon glyphicon-play"></span></button>

当我按下此按钮时，我要更改跨度类：

来自： class="glyphicon glyphicon-play"

收件人： class="glyphicon glyphicon-pause"

http://jsfiddle.net/fnfNm/35/我看了这个例子，但是在它改变之前它没有一个类。

请给我jsfiddle示例。

Answer 1

我这样解决了：

的HTML

<button class="btn btn-primary playPauseBtn" onclick="myFunction()" type="button">
  <span id="playPauseSpanId" class="glyphicon glyphicon-play"></span>
</button>

Java脚本

function myFunction(){
    wavesurfer.playPause();

    if(wavesurfer.isPlaying() == true){
        document.getElementById("playPauseSpanId").className ="glyphicon glyphicon-pause"

    }else {
        document.getElementById("playPauseSpanId").className ="glyphicon glyphicon-play"
    }

}

Answer 2

这里有小算法，用于更改类。

 var playPauseBtn = document.querySelector('.playPauseBtn'); if(playPauseBtn){ var span = document.querySelector('.playPauseBtn .glyphicon'); playPauseBtn.addEventListener('click', function(){ if (span) { if (span.classList.contains('glyphicon-play')) { span.classList.remove('glyphicon-play'); span.classList.add('glyphicon-pause'); } else { span.classList.remove('glyphicon-pause'); span.classList.add('glyphicon-play'); } } },false); } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <button class="btn btn-primary playPauseBtn" onclick="wavesurfer.playPause()" type="button"> <span class="glyphicon glyphicon-play"></span> </button>