jquery - jQuery CSS类问题

同一标签有2个类别。 .bt1类在html代码中设置为默认值。

我需要这个p标签在单击时更改其类并将其保存，当我单击此p标签时，我需要它成为“ bt1i”类并且“ bt1i” onclick函数开始工作。有人可以帮助我了解为什么它不起作用以及错误在哪里。据我了解，当我在jquery代码中更改类时，它不会为下一次jquery调用保存。

jQuery(document).ready(function(){

  $(".slide1").animate({marginRight:"-446px"}, 500 );
  $(".commonslide").animate({width:"206px", opacity:0}, 400 );
  $(".mainarea").animate({marginRight:"206px"}, 500);



 $(".bt1").click(function(){
     $(this).toggleClass("bt1i");
  $(".mainarea").animate({marginRight:"652px"}, 400);
  $(".sidebar").animate({marginRight:"0px"}, 400 );
        $(".slide1").animate({marginRight:"0px"}, 400 );
  $(".commonside").animate({width:"652px", opacity:1}, 400 );
 });




 $(".bt1i").click(function(){
  $(".slide1").animate({marginRight:"-446px"}, 500 );
  $(".commonside").animate({width:"206px", opacity:1}, 400 );
  $(".mainarea").animate({marginRight:"206px"}, 500);
     $(this).toggleClass("bt1");
 });


});

最佳答案

您需要更改.bt1i处理程序以通过.live()工作，如下所示：

$(".bt1").live('click', function(){
//and...
$(".bt1i").live('click', function(){

当您执行$(".bt1i").click(...)时，它正在寻找具有bt1i类的元素，然后将click处理程序绑定到它们……要切换该类的元素当时没有该类。使用.live()它将监听该类的元素，无论添加什么元素……选择器都会在事件发生时进行评估。

附带说明一下，如果您希望它按预期方式运行，则还需要关闭上一个类，只需将这两个都添加到每个.toggleClass()调用中，如下所示：

$(this).toggleClass("bt1 bt1i");

这将有效地交换元素上的类。