2011-01-10 31 views
1

我有jQuery的一些麻煩。 我有一套Div .square類。其中只有一個應該有一個.active類。這個.active類可以在onClick上激活/取消激活。jQuery的選擇與.not()

這裏是我的代碼:

jQuery().ready(function() { 
$(".square").not(".active").click(function() { 
    //initialize 
    $('.square').removeClass('active'); 

    //activation 
    $(this).addClass('active'); 

    // some action here... 
}); 

$('.square.active').click(function() { 
    $(this).removeClass('active'); 
}); 
    }); 

我的問題是,第一個功能叫做SI,即使我點擊活動.square,因爲如果選擇不工作。事實上,這似乎是由於addClass('active')行...

你有一個想法如何解決這個問題嗎? 謝謝

回答

1

只給一些從其他的答案不同。寂寞的日子是正確的說這個功能是綁定到他們在開始時的任何事情上。這不會改變。

以下代碼使用jQuery的live方法來保持最重要的東西。 Live將始終處理選擇器引用的任何內容,所以如果您更改了類,它將不斷更新。您也可以動態地使用square類添加新div,並且它們也會自動擁有該處理程序。

$(".square:not(.active)").live('click', function() { 
    $('.square').removeClass('active'); 
    $(this).addClass('active'); 
}); 

$('.square.active').live('click', function() { 
    $(this).removeClass('active'); 
}); 

實例工作:http://jsfiddle.net/jonathon/mxY3Y/

注:我不是說這是我會怎麼做(正是取決於您的要求),但它只是另一種方式來看待事物。

+0

謝謝,這很好。我不知道實時方法...但是,我不明白我的代碼出了什麼問題。 – Yako 2011-01-10 15:14:28

1

這是因爲該功能綁定到創建它們時沒有active類的元素。你應該綁定到所有.square元素,並採取取決於元素是否具有類active不同的操作:

$(document).ready(function(){ 
    $('.square').click(function(){ 
     var clicked = $(this); 
     if (clicked.hasClass('active')) { 
      clicked.removeClass('active'); 
     } else { 
      $('.square').removeClass('active'); 
      clicked.addClass('active'); 
     } 
    }); 
});