Question

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

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

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

我几乎可以肯定有一种方法可以将它组合成一次点击......

^^^上面更新^^^

Answer 1

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

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

Answer 2

回答已更新

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

Answer 3

您可以一次性切换N个课程

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

Answer 4

这应该可以解决问题：

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

此外，在切换类时，我建议使用基类和切换类，而不是在两个类之间切换。

Answer 5

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

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

Answer 6

您可以简单地执行类似

的操作

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

在“点击”处理程序

中

Answer 7

我是这样做的，有多个图像用类$（'。img-polaroid'）和类$（'。drag'），当点击其中一个图像时，它会删除$（'。drag' ）将这个元素添加回所有元素之后

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

Answer 8

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

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

它扩展了一个新的jQuery方法.toggleClasses（），它完全符合你的要求。检查一下，如果你有改进，可以随时改进它：）

使用jQuery切换多个元素类

8 个答案: