toggling class Jquery

toggling class Jquery

本文关键字：Jquery class toggling      更新时间：2023-09-26

我为我的视频创建了一个播放和暂停按钮，当按下按钮时，我试图切换类，即当你点击暂停按钮时，类切换到，反之亦然。

以下是我的代码片段，代码链接也在这里

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

有人知道怎么做吗？

查看removeClass()和addClass()。。。好吧，他们做他们的名字。

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

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

如果你想换个班。Try.attr（）

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

Or.toggleClass（）:

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

您可以使用removeClass和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");
    }
 });

打开页面时添加类

如果你可以访问HTML，只需将其添加到你的标签中：

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

如果您只能使用JavaScript:

$(document).ready(function() {
    $("#play-pause-btn").addClass("playing");
});
相关文章：