jquery css类问题答案

【问题标题】：jquery css class problemjquery css类问题
【发布时间】：2010-07-14 01:29:15
【问题描述】：

同一个有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");  
 });


});

【问题讨论】：

下载 FIREBUG.. 它是这些东西的救星！ :P

标签： jquery css class

【解决方案1】：

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

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

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

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

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

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

【讨论】：

@Ahmed - 欢迎 :) 如果他们解决了问题，请务必接受您的问题的答案......如果他们没有评论仍然无法解决的问题 :)

【解决方案2】：

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

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

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

【讨论】：