Question

基本上，我想知道在用户点击时在两个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/

Answer 1

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

<强> HTML

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

<强> JS

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的状态。

Answer 2

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

他的帖子展示了如何通过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>

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

2 个答案: