单击 jquery 时切换类

Question

我有这个代码，我试图在点击聊天按钮时添加和删除类。

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

当聊天框被点击然后bounceUp99类被添加，它按预期工作，当再次点击该聊天图标时，它被删除，但那一刻我想删除bounceUp99并添加类bounceDown99。 下面是我的代码。 我已经注释掉了我已经删除的代码。 任何帮助都会很棒。 如果再次单击时添加了bounceDown99，则聊天框应关闭并显示一些动画。 你可以看到，通过在打开聊天框时手动将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 类将起作用。

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

这将删除类bounceUp99并添加类bounceDown99 。 如果你再次这样做，它会删除类bounceDown99并恢复类bounceUp99 。

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

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

但是在这里，我们不能将bounceUp99 类作为默认值。 所以，我们可以使用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