使用jQuery切换多个元素类

lhcgjxsq  于 2023-06-22  发布在  jQuery
关注(0)|答案(9)|浏览(102)

我需要能够切换类,当我点击一个元素。它适用于该元素:

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

但我想添加到它切换类的页面上的所有元素,有一个特定的类,说“togToo”。对于这些元素,我需要在“classC”和“classD”之间切换。
我几乎可以肯定有一种方法可以把它结合到一次点击中。。

*^^^已更新^^^

emeijp43

emeijp431#

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

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

myzjeezk2#

答案已更新

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

7cjasjjr3#

您可以一次切换N个类

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

mcvgt66p4#

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

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

huwehgph5#

这应该能起到作用:

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

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

niwlg2el

niwlg2el6#

如果你正在寻找一种方法来切换多个类,一个接一个,而不是全部在一起,我很快写了一个小脚本,你可以用途:
https://github.com/ThibaultJanBeyer/.toggleClasses-for-jQuery
它扩展了一个新的jQuery方法.toggleClasses(),它可以完全按照你的要求去做。检查一下,如果你有改进的地方,请随时改进:)

rqcrx0a6

rqcrx0a67#

您可以简单地执行以下操作

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

在“click”处理程序中

xghobddn

xghobddn8#

我这样做,有多个图像类$('. img-polaroid')和类$('. drag'),当其中一个图像被点击,它删除$('. drag')后,将其添加回所有的元素

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

mec1mxoz9#

我知道这是一个老问题,但从jQuery v3.3开始,我们可以像这样使用一个类数组:

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

参考:www.example.com http://api.jquery.com/toggleclass/#toggleClass-classNames

相关问题