jQuery Replace only the class of an element without changing other content

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.

Please do not use `.live()`. You should rather use event delegation with `.on()`, see this discussion [What's the difference between jQuery .live() and .on()](http://stackoverflow.com/questions/8042576/whats-the-difference-between-jquery-live-and-on). — apfelbox, Aug 01 '12 at 20:08

score 0 · Answer 1 · answered Aug 01 '12 at 19:49

0

Check out jQuery's .toggleClass() function:

http://api.jquery.com/toggleClass/

answered Aug 01 '12 at 19:49

Giovanni B

1,032
1
9
12

j08691 · Accepted Answer · 2012-08-01T20:06:33.263

0

$('#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.

edited Aug 01 '12 at 20:06

answered Aug 01 '12 at 19:52

j08691

204,283
31
260
272

That just triggers a page reload – Jacob Windsor Aug 01 '12 at 19:55
I thought that too but it does. I removed all other code from the .js file and checked all the markup had the right id's/classes with no avail – Jacob Windsor Aug 01 '12 at 19:57
I also stumbled in a situation where `e.preventDefault()` was not suffice for the browser to not open the link. I also had to `return false;` in the event handler. This "following the link" is the reload of the page. – apfelbox Aug 01 '12 at 20:05
On another note: I think you meant `$(this).hasClass('play') ? song.pause() : song.play();` in your code example. ;-) – apfelbox Aug 01 '12 at 20:06
@apfelbox - correct, fixed. Although judging from the OP's other issues it doesn't seem to be a major problem. – j08691 Aug 01 '12 at 20:07

jQuery Replace only the class of an element without changing other content

2 Answers2