切换类Jquery

Question

I have created a play and pause button for my video, I have trying to switch class when the button is pressed, Ie when you click on the pause button the class switches to and vice versa.

Below is a snippet of my code of and the link to the code is also here

$('#play-pause-btn').click(function() {
    $('#video-wall__content').get(0).paused ? 
        $('#video-wall__content').get(0).play() : $('#video-wall__content').get(0).pause();
});

does anyone know how this can be done?

Answer 1

Check out removeClass() , and addClass() ...Well they do what they are named after.

http://api.jquery.com/removeclass/

http://api.jquery.com/addclass/

If you want to change the class. Try .attr()

$("#td_id").attr('class', 'newClass');

Or .toggleClass() :

$("#td_id").toggleClass('change_me newClass');

Answer 2

You can remove/add the classes on click using removeClass and addClass .

$('#play-pause-btn').click(function(){
    if ($('#video-wall__content').get(0).paused) {
        $('#video-wall__content').get(0).play();
        // now playing
        $(this).removeClass("paused").addClass("playing");
    }
    else {
        $('#video-wall__content').get(0).pause();
        // now paused
        $(this).removeClass("playing").addClass("paused");
    }
 });

Addding the class when the page is opened

If you have access to the HTML, just add it to your tag:

<div id="play-pause-btn" class="playing> [...] </div>

If you can use only JavaScript:

$(document).ready(function() {
    $("#play-pause-btn").addClass("playing");
});