使用jQuery和JavaScript在按钮上添加开关行为

Question

I'm really stuck with this. The logic here is to have one script that works with different audio elements on the page and makes switch between PLAY and PAUSE buttons by adding/removing classes. Any idea what to change/add in order to make it work. Anything will be appriciated!

<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

Have you tried $('#pause-button').hide(); $('#play-button').show();

It doesn't use classes but it seems to solve the problem of hiding and showing buttons.