使用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（）;

它不使用类，但似乎解决了隐藏和显示按钮的问题。