使用jQuery和JavaScript在按鈕上添加開關行為

Question

我真的很堅持。 這里的邏輯是使一個腳本可以與頁面上的不同音頻元素一起使用，並通過添加/刪除類在PLAY和PAUSE按鈕之間進行切換。 任何想法為了使它起作用而需要更改/添加的內容。 一切都會被應用！

<audio id="arbeiten" preload="none">
    <source src="../../../audio/sound1.mp3" type="audio/mpeg">Your browser does not support the audio element.
</audio>

<button id="play-button" class="btn btn-xs" data-action="play" data-target="#arbeiten">
       Play
</button>
<button id="pause-button" class="btn btn-xs hide" data-action="pause" data-target="#arbeiten">
    Pause
</button>

<script>
     $('body').on('click','[data-action]',function() {
         var action = $(this).data('action');
         var target = $(this).data('target');
         switch(action) {
             case 'play':
                 $(target)[0].play();
                 $(target).addClass("hide");
                 $(this).removeClass('hide');
                 break;
             case 'pause':
                 $(target)[0].pause();
                 $('#pause-button').addClass("hide");
                 $('#play-button').removeClass('hide');
                 break;
         }
         console.log('Called action ',action,' on element ',target);
     });

</script>

Answer 1

您是否嘗試過$（'＃pause-button'）。hide（）; $（'＃play-button'）。show（）;

它不使用類，但似乎解決了隱藏和顯示按鈕的問題。