jquery 使用 .not() 选择

Question

我在使用 jQuery 时遇到了一些麻烦。 我有一组带有 .square 类的 Div。其中只有一个应该有 .active 类。该 .active 类可以在单击时激活/取消激活。

这是我的代码：

    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');
 });
    });

我的问题是，即使我单击活动的 .square，第一个函数 si 也会调用，就好像选择器不起作用一样。事实上，这似乎是由于 addClass('active') 行...

您知道如何解决这个问题吗？ 谢谢

Answer 1

只是为了给出与其他答案不同的东西。 Lonesomeday 的说法是正确的，函数与一开始的任何内容都绑定在一起。这不会改变。

以下代码使用 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/

注意：我不是说这就是我的做法（完全取决于您的要求），但这只是另一种看待事物的方式。

Answer 2

这是因为该函数绑定到创建元素时不具有 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');
        }
    });
});