使用 jQuery 切换多个元素类答案

【问题标题】：Toggle multiple element classes with jQuery使用 jQuery 切换多个元素类
【发布时间】：2021-11-23 22:19:54
【问题描述】：

当我单击一个元素时，我需要能够切换类。它适用于该元素：

$(".main").click(function() {
    $(this).toggleClass("classA").toggleClass("classB");
});

但我想添加它以切换页面上具有特定类的所有元素的类，例如“togToo”。对于这些元素，我需要在“classC”和“classD”之间切换。

我几乎可以肯定有一种方法可以将其组合成一键...

^^^ 以上更新 ^^^

【问题讨论】：

标签： jquery

【解决方案1】：

如果要切换的元素从两个类之一开始，您可以像这样来回切换：

$('#element_to_click').click( function(){
  $('.togToo').toggleClass('classC classD');
});

【讨论】：

【解决方案2】：

答案已更新

$(".main").click(function() {
    $(this).toggleClass("classA").toggleClass("classB");
    $('.togToo').toggleClass("classC").toggleClass("classD");
})

【讨论】：

当我只点击那个主要元素时，我需要切换其他（次要）元素的类。

【解决方案3】：

你可以一次切换 N 个类

$(/* selector */).toggleClass('classA classB classC');

【讨论】：

【解决方案4】：

为什么不使用 jQuery 类选择器？

$('.togToo').toggleClass("classC").toggleClass("classD");

【讨论】：

【解决方案5】：

这应该可以解决问题：

$(".main").click(function() {
  $(this).toggleClass("classA").toggleClass("classB");
  $(".togToo").toggleClass("classC").toggleClass("classD");
));

另外，当切换类时，我建议有一个基类和一个切换类，而不是在两个类之间切换。

【讨论】：

【解决方案6】：

如果您正在寻找一种方法来一个接一个地切换多个类，而不是一起切换，我很快写了一个小脚本，您可以使用：

https://github.com/ThibaultJanBeyer/.toggleClasses-for-jQuery

它扩展了一个新的 jQuery 方法 .toggleClasses() ，它完全符合您的要求。检查一下，如果您有改进，请随时改进:)

【讨论】：

【解决方案7】：

你可以简单地做类似的事情

$(".classC").toggleClass("ClassD");

在“点击”处理程序中

【讨论】：

类选择器需要一个 '.'前缀，这也不会切换类，但它们的可见性，使用 toggleClass 来切换类
@Koen 你说得对，我为我的回答感到羞耻 :) 现已修复
这行不通。它只会为所有已经拥有classC 的元素切换classD 的开/关，而不切换classC 本身。

【解决方案8】：

我是这样做的，有多个具有 $('.img-polaroid') 类和 $('.drag') 类的图像，当单击其中一个图像时，它会删除 $('.drag' ) 在将其添加回所有元素后添加到该元素

$('.img-polaroid').click(function(){
    if ($(this).hasClass('drag')) {
        $('.img-polaroid').addClass('drag');
        $(this).removeClass('drag');
    }
});

【讨论】：