如何在播放和暂停按钮之间切换？答案

【问题标题】：How to toggle between a play and pause button?如何在播放和暂停按钮之间切换？
【发布时间】：2016-02-08 05:30:16
【问题描述】：

基本上，我想知道在用户点击时在两个 img 或 div 之间切换的最佳方式。因此，首先播放图像是可见的，当用户单击时，播放图像被隐藏并显示暂停图像。当用户单击暂停图像时，暂停图像被隐藏并显示播放图像。

我尝试使用 ng-show，但我只能弄清楚如何在不隐藏另一个的情况下显示两个图像。因此，播放图像会在暂停图像旁边，这并不理想。

提前致谢:)

我尝试过的代码不起作用：

HTML

<button ng-click="changeStatus" ng-show="checkStatus">Play</button>
<button ng-click="changeStatusAgain" ng-hide="checkStatus">Pause</button>

控制器：

$scope.changeStatus=function(){
    $scope.checkStatus = false;
}

$scope.changeStatusAgain=function(){
    $scope.checkStatus = true;
}

https://jsfiddle.net/n8nnwtte/

【问题讨论】：

听起来您需要查看 stackoverflow.com/help/how-to-ask 。您应该发布您的尝试的 MVCE，它做错了什么/不受欢迎的行为，以及您希望它做什么。此外，“什么是 X 的最佳方式”之后的问题是题外话，因此您可以考虑在重写时缩小范围。
知道了！我将使用我尝试过的所有代码进行快速重写。谢谢:)

标签： angularjs ionic-framework

【解决方案1】：

对两者使用相同的表达式并根据您的逻辑否定它。

HTML

 <button class="play" ng-show="!song.playing" ng-click="song.togglePlay()">
 <button class="pause" ng-show="song.playing" ng-click="song.togglePlay()">

var $scope.song = {
    playing: false, // Set the initial state

    togglePlay: function() {
         $scope.song.playing = !$scope.song.playing; // This would alternate the state each time

         // Do something with the song
        if ($scope.song.playing) { /*..*/ }  else { /*..*/ }
    }
};

这假设您在作用域中定义了一个song 对象，并且它有一个名为playing 的布尔属性。所以如果song.playing 是假的，我们会显示播放按钮，如果是真的，我们会显示暂停按钮。

除了实际控制播放的作用之外，定义的togglePlay() 方法还可以用来交替song.playing 的状态。

【讨论】：

您的解决方案很棒，但对我的问题来说有点复杂。我基于 ng-click 合并了一个布尔属性，但无论出于何种原因，单击时它都不会切换。我在上面添加了代码来向您展示我所写的内容。 :)
@MehdiN 您更新的代码似乎是有效的，尽管令人困惑。可能是您的原始代码中缺少某些内容导致它失败。我已经使用之前建议的相同逻辑更新了我的示例。

【解决方案2】：

JavaScript 切换（播放/暂停）DOM 元素点击事件的声音

他的帖子展示了如何通过 JavaScript 操作 DOM 元素的 onclick 事件来切换（播放/暂停）声音。在这个例子中，浏览器对 HTML5 音频标签的支持是必须的。

https://siongui.github.io/code/javascript-sound/toggle.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>JavaScript Toggle (Play/Pause) Sound on Click Event of DOM Element</title>
</head>
<body>

<button id="player" type="button"
  onclick="javascript:toggleSound();">
  Click to Toggle Sound
</button>
<audio id="audio">
  <source src="Wat_Metta_Buddha_Qualities.mp3" type="audio/mpeg">
Your browser does not support this audio format.
</audio>

<script type="text/javascript">
function toggleSound() {
  var audioElem = document.getElementById('audio');
  if (audioElem.paused)
    audioElem.play();
  else
    audioElem.pause();
}
</script>

</body>
</html>

【讨论】：