单击jquery切换类

Question

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

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

当chatbox被点击时，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方法可以做到这一点。

您可以在official documentaion中了解更多信息。

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

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

Answer 2

如果您将'bounceUp99‘类设置为默认值，则切换类将起作用。

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

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

如果想要匹配公开这两个类的元素，可以使用multiple class selector并编写：

$(".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