Question

I have a player that is triggered with jQuery. I may have several players on a single page but a single ‘miniPlayer’ in the toolbar. The player toolbar needs to play/pause etc if another player event is triggered. For this to happen I need to only replace the class inside the player element.

The player in the toolbar has an id of #miniPlayer and all other players will just be #player, this is for styles. Because of this I can only replace the class within the element so that the styles are not changed for the miniPlayer if a button in the player is clicked, or visa versa.

Mini Player (play);

<a id="miniControls" class="play" href="" title=""></a>

Will become;

<a id="miniControls" class="pause" href="" title=""></a>

Onclick of either the miniPlayer pause button or the normal player pause button.

Normal Player (play);

<a id="controls" class="play" href="" title=""></a>

Will become;

<a id="controls" class="pause" href="" title=""></a>

Onclick of either the miniPlayer pause button or the normal player pause button.

The jQuery I have at the moment will replace the miniplayer, if the normal player (play) is clicked with;

<a id="controls" class="pause" href="" title=""></a>

But the id needs to stay as miniControls for the styles. This will be the opposite but same problem if the miniPlayer is clicked.

Play/Pause functions in jquery script (only works for miniPlayer at the moment):

play.live('click', function(e) {
    e.preventDefault();
    song.play();

    $('.play').replaceWith('<a id="miniControls" class="pause" href="" title=""></a>');

    $('.seek').attr('max',song.duration);
});

pause.live('click', function(e) {
    e.preventDefault();
    song.pause();
    $('.pause').replaceWith('<a id="miniControls" class="play" href="" title=""></a>');

});

Is there a way to only replace the class so i’d just replace $(‘.pause’) with $(‘.play’) instead of the whole <a> tag. I’ve had a look on the jquery website but couldn’t find anything. Maybe I am looking at it at the wrong angle.

Answer 1

$('#miniControls').click(function(e){
    e.preventDefault();
    $(this).hasClass('play') ? song.pause():song.play();
    $(this).toggleClass('play pause');
});

You can greatly reduce your code by using something like the above example. In this case you would use .toggleClass() to switch between the play and pauses classes and also use .hasClass() to determine which action to perform.