使用jquery和javascript在按钮上添加开关行为

时间:2016-03-28 19:48:12

标签: javascript jquery html5 button audio

我真的很困惑。这里的逻辑是让一个脚本与页面上的不同音频元素一起使用,并通过添加/删除类在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>

1 个答案:

答案 0 :(得分:0)

你试过吗? $( '#暂停按钮')隐藏(); $( '#播放按钮')显示();

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