jquery css类问题

时间:2010-07-14 01:29:15

标签: jquery css class

同一个

标签有两个类。 class .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");  
 });


});

2 个答案:

答案 0 :(得分:0)

您需要通过.live()更改.bt1i处理程序,如下所示:

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

执行$(".bt1i").click(...)时,它正在寻找当时具有bt1i 类的元素并将click处理程序绑定到它们...元素你正在切换课程没有班级然后。使用.live()它会监听或使用该类的元素,无论何时添加它们......都会在事件发生时评估选择器。

作为旁注,如果您希望此功能符合预期,您还需要关闭上一个类,只需将其添加到每个.toggleClass()调用中,如下所示:

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

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

答案 1 :(得分:0)

尼克的回答是正确的。这是另一种解决方案:

$(".bt1").click(function () {
    if ($(this).hasClass("bt1i")) {
        // add behavior for the bt1i class here
    }
    $(this).toggleClass("bt1i");
}

您遇到问题的原因是因为jQuery的.click()函数仅将处理程序绑定到当前具有bt1i类的项目。由于直到稍后才会添加该类,因此处理程序不会绑定任何内容。