How do I make a button class switch that triggers a player to appear and hide?

Question

How do I make a button class switch that triggers a player to appear and hide?

Navigation

#1 by (0 votes)

0

I have 3 buttons in the Link format with classes: .icon-play, .icon-pause and .icon-download, I want to change the play class with pause, as well as the inverse without influencing the download button , once the icon-play is clicked it will show a player and if the pause is activated it will hide the player.

var btnplay = $(".livro-audio a").find(".icon-play");
var btnpause = $(".livro-audio a").find(".icon-pause");

$( btnplay ).click(function() {
 $( '.player-active' ).show();
 $(this).attr('class', 'icon-pause');
 if($('.player-active:visible')){
    $( ".livro-audio" ).last().css( "margin-bottom", "150px" );
    $( ".livro-video" ).last().css( "margin-bottom", "150px" );
  }
});

$( btnpause ).click(function() {
  $( '.player-active' ).hidden();
  $(this).attr('class', 'icon-play');
  if($('.player-active:hidden')){
    $( ".livro-audio" ).last().css( "margin-bottom", "80px" );
    $( ".livro-video" ).last().css( "margin-bottom", "80px" );
  }

});

So far Lucas has given me a light, thus:

 $(".livro-audio a").click(function(){
  if($(this).hasClass('icon-play')){
   $(this).addClass('icon-pause').removeClass('icon-play');
   $('.player-active').show();
  }
 else{
   $(this).addClass('icon-play').removeClass('icon-pause');
   $('.player-active').hide();
  }
});

jquery classes switch click addclass

asked by anonymous 05.04.2017 / 17:15

1 answer

Build a Using R Form via method PUT is not sending the data to a service restEasy

score 0 · Accepted Answer

You can use addClass and removeClass to change the style in the element.

Example:

$("#player").click(function(){
  if($(this).hasClass('player_azul'))
    $(this).addClass('player_ver').removeClass('player_azul');
  else 
    $(this).addClass('player_azul').removeClass('player_ver');
});

.player_azul{
  background: blue;
}

.player_ver{
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="player">Elemento</div>

This is just one example that you can adapt to suit your case. In some situations it's also interesting to use jQuery toggleClass .