单击jquery添加类和删除类

Question

因此，这是我的添加和删除功能，但它只适用于添加，它不删除再次单击

(function ($) {
      $(".call-us-button .call").on("click", function () {
        $(this).parent().find(".phone-number").fadeIn();
        $(this).parent().find(".qr-code-call").fadeIn();
        $(this).parent().addClass("callBtnActive");
      });
    
      $(".call-us-button .call").on("click", function () {
        $(this).parent().find(".phone-number").fadeOut();
        $(this).parent().find(".qr-code-call").fadeOut();
        $(this).parent().removeClass("callBtnActive");
      });
    })(jQuery);

Answer 1

通过使用toggleClass()和fadeToggle()方法，可以在单个事件处理程序中实现所需的功能。此外，可以通过链接方法和合并类选择器来使代码更简洁。

(function($) {
  $(".call-us-button .call").on("click", function() {
    $(this).parent()
      .toggleClass("callBtnActive")
      .find(".phone-number, .qr-code-call").fadeToggle();
  });
})(jQuery);

另外，请注意，您的代码包装在生平中，而不是document.ready事件处理程序中。两者是不对等的。您的代码似乎至少在运行，所以它在DOM中的位置是正确的，但是请注意，情况可能并不总是这样。