2016-03-28 1 views
0

Я действительно застрял в этом. Логика здесь состоит в том, чтобы иметь один скрипт, который работает с различными аудио элементами на странице и позволяет переключаться между кнопками PLAY и PAUSE, добавляя/удаляя классы. Любая идея, что нужно изменить/добавить, чтобы заставить ее работать. Все будет оценено! .Добавление включения-выключения на кнопке с jquery и javascript

<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> 
+0

Не уверен, что если вы заинтересованы в использовании JQuery UI, но у них есть образец в основном то, что вы говорите о [https://jqueryui.com/button/#toolbar](https://jqueryui.com/button/# панель инструментов) – David784

ответ

0

Вы пробовали $ ('# пауза кнопка') скрыть(); $ ('# play-button'). Show();

Он не использует классы, но это, кажется, решить проблему скрытия и отображения кнопок.

+0

Нет, это не работает. – Vi0nik

Смежные вопросы