выбор jquery с .not ()

Question

У меня проблемы с jQuery. У меня есть набор Div с классами .square. Предполагается, что только один из них имеет класс .active. Этот .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');
 });
    });

Моя проблема в том, что первая функция si вызывается, даже если я нажимаю на активный .square, как будто селектор не работает. На самом деле это происходит из-за строки addClass ('active') ...

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

Answer 1

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

В следующем коде используется метод jQuery live , чтобы быть в курсе событий.Live всегда будет обрабатывать то, на что ссылается селектор, поэтому он постоянно обновляется, если вы меняете свой класс.Вы также можете динамически добавлять новые div с классом 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');
        }
    });
});