javascript - 多次单击同一元素会删除类

Question

我遇到了一个问题，我想在单击元素时添加和删除类。但是，如果我单击同一元素两次，添加的类将被删除。我真的不明白这里有什么问题。

$('#01').click( function() {    
    $(".d1").removeClass("show-forms");
    $(".d2").removeClass("show-forms");
    $(".pick-notice").toggleClass("hide-forms");
    $(".d0").removeClass( "hide-forms" );
    $(".d0").toggleClass("show-forms");
} );

还有一种方法可以对更多元素使用相同的函数，如下所示:

$('#01, #02, #03').click( function() {...

我尝试过，但没有成功

$('#01', '#02', '#03').click( function() {...

Answer 1

要将相同的函数分配给多个选择器，您的第一个代码应该可以工作(请参见此处引用:https://api.jquery.com/multiple-selector/)

$('#01, #02, #03').click( function() {} );

从您的示例中添加类的位置并不太清楚，我认为您可能希望使用 addClass ( https://api.jquery.com/addClass/ ) 而不是toggleClass ( https://api.jquery.com/toggleClass/ )。 addClass 将类添加到所选元素。而toggleClass 会将该类添加到所选元素(如果该元素尚不具有该类)，如果它确实具有该类，则会将其删除。那么这可能就是为什么您第二次单击它会删除该类的原因？

尝试以下操作:

$('#01').click( function() {    
    $(".d1").removeClass("show-forms");
    $(".d2").removeClass("show-forms");
    $(".pick-notice").addClass("hide-forms");
    $(".d0").removeClass( "hide-forms" );
    $(".d0").addClass("show-forms");
} );

或者如果您想要多个选择器:

$('#01, #02, #03').click( function() {    
    $(".d1").removeClass("show-forms");
    $(".d2").removeClass("show-forms");
    $(".pick-notice").addClass("hide-forms");
    $(".d0").removeClass( "hide-forms" );
    $(".d0").addClass("show-forms");
} );