Hinzufügen von Ein-Aus-Verhalten auf einer Schaltfläche mit Jquery und Javascript

Question

Ich bin wirklich mit diesem fest. Die Logik besteht darin, ein Skript zu verwenden, das mit verschiedenen Audioelementen auf der Seite arbeitet und zwischen den Schaltflächen PLAY und PAUSE wechselt, indem Klassen hinzugefügt/entfernt werden. Irgendeine Idee was zu ändern/hinzuzufügen, um es zu arbeiten. Alles wird geschätzt! .

<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

Haben Sie versucht, $ ('# Pause-Taste') ausblenden(); $ ('# play-button'). Show();

Es verwendet keine Klassen, aber es scheint das Problem zu lösen, Tasten zu verstecken und anzuzeigen.