在单击jquery时切换类

Question

我有这段代码，当点击聊天按钮时，我正在尝试添加和删除类。

实时网址在这里。https://itsneotpras.myshopify.com/

当聊天框被点击时，bounceUp99类被添加，它按预期工作，当聊天图标被再次点击时，它被删除，但那一刻我想删除bounceUp99并添加类bounceDown99。下面是我的代码。我已经注释掉了我删除的代码。任何帮助都会很棒。如果再次单击时添加了boundDown99，则聊天框应该会关闭并显示一些动画。当聊天框打开时，您可以手动将bounceUp99替换为bounceDown99

jQuery("#pushdaddy-button,#pushdaddy-close").click(function() { 
// jQuery("#pushdaddy-box").removeClass("bounceDown99");
// jQuery("#pushdaddy-box").addClass("bounceUp99");
if(jQuery("#pushdaddy-box").hasClass('bounceDown99')) {
//    jQuery("#pushdaddy-box").removeClass('bounceDown99');
//        jQuery("#pushdaddy-box").addClass('bounceUp99');
//     jQuery("#pushdaddy-box").removeClass('bounceUp99');

} 
else if(jQuery("#pushdaddy-box").hasClass('bounceUp99')) {
jQuery("#pushdaddy-box").removeClass('bounceUp99');
//    jQuery("#pushdaddy-box").addClass('bounceDown99');
}

else {
jQuery("#pushdaddy-box").addClass('bounceUp99');
jQuery("#pushdaddy-box").removeClass('bounceDown99');
}

})

Answer 1

有一个toggleClass方法可以做到这一点
您可以在官方文档中了解更多信息。

<div onclick = "jQuery(this).toggleClass('my-class')">div tag</div>

注意：请考虑使用$('selector')而不是jQuery('selector')。

Answer 2

如果您将'bounceUp99'类作为默认类，则Toggle class将起作用。

$(element).toggleClass("bounceUp99 bounceDown99");

这将删除类bounceUp99并添加类bounceDown99。如果您再次执行此操作，它将删除类bounceDown99并恢复类bounceUp99。

如果您想匹配公开任一类的元素，可以使用多类选择器并写入：

$(".bounceUp99, .bounceDown99").toggleClass("bounceUp99 bounceDown99");

但在这里，我们不能默认使用boundUp99类。因此，我们可以使用hasClass、addClass和removeClass

$("h1").on("click", function () {
if ($(this).hasClass("a")) {
$(".a").addClass("b").removeClass("a");
} else if ($(this).hasClass("b")) {
$(".b").addClass("a").removeClass("b");
} else {
$(this).addClass("a");
}
});

演示：https://codesandbox.io/s/optimistic-sunset-74gns?file=/index.html