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

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

angularjs ionic-framework

Angularjs 如何在播放和暂停按钮之间切换？,angularjs,ionic-framework,Angularjs,Ionic Framework,基本上，我想知道在用户点击时在两个img或div之间切换的最佳方式。所以，首先播放图像是可见的，当用户单击时，播放图像被隐藏并显示暂停图像。当用户单击“暂停图像”时，将隐藏“暂停图像”，并显示“播放图像” 我尝试使用ng show，但我只能想出如何显示两个图像而不隐藏另一个。因此，播放图像将位于暂停图像旁边，这并不理想提前感谢：）我尝试过的代码无效： HTML 对两者使用相同的表达式，并根据您的逻辑对其求反 HTML <button class="play" ng-show="!so

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

我尝试使用ng show，但我只能想出如何显示两个图像而不隐藏另一个。因此，播放图像将位于暂停图像旁边，这并不理想

提前感谢：）

我尝试过的代码无效：

HTML

对两者使用相同的表达式，并根据您的逻辑对其求反

HTML

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

这假设您在范围中定义了一个

song

对象，并且它有一个名为

playing

的布尔属性。因此，如果

song.playing

是falsy，我们会显示play按钮，如果是true，我们会显示pause按钮

然后，可以使用定义的

togglePlay（）

方法来交替

歌曲的状态。播放

除了其实际控制播放的作用之外。

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

HTML

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

这假设您在范围中定义了一个

song

对象，并且它有一个名为

playing

的布尔属性。因此，如果

song.playing

是falsy，我们会显示play按钮，如果是true，我们会显示pause按钮

然后，可以使用定义的

togglePlay（）

方法来交替

歌曲的状态。播放

除了其实际控制播放的作用之外。

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

他的文章展示了如何通过JavaScript操纵DOM元素的onclick事件来切换（播放/暂停）声音。在本例中，浏览器必须支持HTML5音频标记


DOM元素的单击事件上的JavaScript切换（播放/暂停）声音
单击以切换声音
您的浏览器不支持此音频格式。
函数toggleSound（）{
var audioElem=document.getElementById（'audio'）；
如果（audioElem暂停）
audioElem.play（）；
其他的
audioElem.pause（）；
}

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

他的文章展示了如何通过JavaScript操纵DOM元素的onclick事件来切换（播放/暂停）声音。在本例中，浏览器必须支持HTML5音频标记


DOM元素的单击事件上的JavaScript切换（播放/暂停）声音
单击以切换声音
您的浏览器不支持此音频格式。
函数toggleSound（）{
var audioElem=document.getElementById（'audio'）；
如果（audioElem暂停）
audioElem.play（）；
其他的
audioElem.pause（）；
}

听起来你需要退房了。您应该发布您的尝试的MVCE，它做了什么错误/不受欢迎的行为，以及您希望它做什么。另外，遵循“X是最好的方法”的问题是偏离主题的，所以当你重写时，你可以考虑缩小它的范围。我将用我尝试过的所有代码快速重写。谢谢：）听起来你需要退房了。您应该发布您的尝试的MVCE，它做了什么错误/不受欢迎的行为，以及您希望它做什么。另外，遵循“X是最好的方法”的问题是偏离主题的，所以当你重写时，你可以考虑缩小它的范围。我将用我尝试过的所有代码快速重写。谢谢：）你的解决方案很好，但对我的问题来说有点复杂。我基于ng click合并了一个布尔属性，但无论出于何种原因，它在单击时不会切换。我在上面添加了代码，以向您展示我所写的内容。：）@MehdiN您更新的代码似乎是有效的，尽管令人困惑。可能是您的原始代码中缺少某些东西，导致它失败。我已经使用之前建议的相同逻辑更新了我的示例。您的解决方案很棒，但对于我的问题来说有点复杂。我基于ng click合并了一个布尔属性，但无论出于何种原因，它在单击时不会切换。我在上面添加了代码，以向您展示我所写的内容。：）@MehdiN您更新的代码似乎是有效的，尽管令人困惑。可能是您的原始代码中缺少某些东西，导致它失败。我已经使用前面建议的相同逻辑更新了我的示例。

 <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 { /*..*/ }
    }
};

<!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>