выбор jquery с .not()

Question

У меня есть некоторые проблемы с jQuery. У меня есть набор Divs с классами .square. Предполагается, что только один из них имеет класс .active. Этот активный класс может быть активирован/деактивирован onClick.

Вот мой код:

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, как если селектор не работает. Фактически, это, по-видимому, связано с линией addClass ('active') ...

У вас есть идея, как это исправить? Thanks

Answer 1

Просто чтобы дать что-то отличное от других ответов. Lonesomeday правильно говорит, что функция связана с тем, что они на самом деле. Это не меняется.

В следующем коде используется метод jQuery live, чтобы он не отставал от вещей. Live всегда будет обрабатывать все, на что ссылается селектор, поэтому он постоянно обновляется, если вы меняете свой класс. Вы также можете динамически добавлять новые divs с классом square, и они также автоматически будут иметь обработчик.

$(".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'); 
     } 
    }); 
});