Question

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

当我按下此按钮时，我希望更改span类：

来自：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>

Javascript

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>

更改span标签上的类onClick里面的Button标签

2 个答案: