javascript - 在 Javascript 中切换开/关按钮

Question

我被困住了。我有两个按钮，每个按钮都有一个功能，一个在单击时播放声音，一个在单击时暂停声音。我希望能够在它们之间切换，这样当它关闭时我只会看到一个按钮显示“声音打开”，反之亦然。问题是:我的 Javascript 知识!

<audio id="spacesound"> </audio>
<button type="button" id="offbutton" class="offbutton" onclick="disableSound()">Sound off</button><br>
<button type="button" id="onbutton" class="onbutton" onclick="reenableSound()">Sound on</button>

这些是按钮，如果需要，还有它们调用的函数。

//it plays on auto when the page is loaded
myAudiothree = new Audio('media/deepspace.mp3');
myAudiothree.loop = true;
myAudiothree.play();

//continue sound    
function reenableSound()
{
myAudiothree.play();
}

//pause sound
function disableSound()
{
myAudiothree.pause();
}

可能有一些 CSS 代码，但我更愿意用 JS 来实现，谢谢!

Answer 1

解决方案很简单，将实际状态“保存”在变量中......

var isPlaying=false;

function playOrPause()
{
  if(isPlaying)
  {
    myAudiothree.pause();
    isPlaying=false;
  }else
  {
    myAudiothree.play();
    isPlaying=true;
  }
}

现在你只有一个函数而不是两个。

编辑:

我为您创建了一个片段，用于展示如何更改按钮文本。

var isPlaying=false;

$('#myButton').click(function(){
    var $this = $(this);
  if(isPlaying)
    {
      isPlaying=false;
      $this.text('start'); 
      
      }else{
        isPlaying=true;
      $this.text('stop'); 
        }
                
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myButton">Play</button>