jQuery: .not() после .addClass() и .removeClass()

Я делаю навигацию для веб-сайта и хотел бы, чтобы кнопки вели себя так:

  • Разместите активную кнопку на 40 пикселей выше остальных.
  • Переместите кнопки на 10 пикселей выше при наведении, если это не активная кнопка.
  • При нажатии кнопки удалить активный класс со всех кнопок, переместить их все в исходное положение, добавить активный класс к нажатой кнопке, переместить нажатую кнопку на 40 пикселей выше.

Это мой код jQuery:

$(document).ready(function(){
    $('#navigation a').not(".active")
    .mouseover(function(){
            $(this).stop().animate(
                    {top:"-10px"}, 
                    {duration:200}
            )
    })
    .mouseout(function(){
            $(this).stop().animate(
                    {top:"0px"}, 
                    {duration:200}
            )
    })
    .click(function(){
            $('#navigation a.active').animate(
                    {top:"0px"}, 
                    {duration:200}
            )
            $('#navigation a').removeClass("active");
            $(this).addClass("active");
            $(this).stop().animate(
                    {top:"-40px"}, 
                    {duration:200}
            )
    })
});

Кажется, все работает, и классы даются и удаляются правильно. Единственная проблема заключается в том, что метод not() продолжает блокировать начальную активную кнопку, а не те, которые получили класс позже с помощью addClass().


navigation button jquery addclass removeclass
person user745595    schedule 17.04.2014    source источник
comment
eventDeligation.. Ваш обработчик привязывается только к тем элементам, у которых нет класса active. Не те элементы, которые вы позже отдадите классу active.   -  person putvande    schedule 17.04.2014
comment
используйте .on для регистрации обработчиков событий (см. обсуждение в документах по API в устаревшем .live.   -  person collapsar    schedule 17.04.2014
comment
Или проверьте активный класс внутри обработчика, например: if($(this).hasClass('active')) return; (и удалите часть фильтрации not())   -  person A. Wolff    schedule 17.04.2014
comment
если вы предоставите скрипку, будет легко помочь   -  person Ehsan Sajjad    schedule 17.04.2014
comment
возможный дубликат В jQuery, как прикрепить события к динамическим HTML-элементы?   -  person Blazemonger    schedule 17.04.2014

Ответы (1)


arrow_upward
0
arrow_downward

Изменять

$('#navigation a').not(".active")
    .mouseover(function(){
        // ...
    }).mouseout(function() {
        // ...
    }).click(function() {
        // ...
    });

для использования делегирования событий:

$('#navigation').on('mouseover', 'a:not(.active)', function(){
    // ...
}).on('mouseout', 'a:not(.active)', function(){
    // ...
}).on('click', 'a:not(.active)', function(){
    // ...
});

или короче:

$('#navigation').on({
    'mouseover': function(){
        // ...
    },
    'mouseout': function(){
        // ...
    },
    'click': function(){
        // ...
    }
}, 'a:not(.active)');

https://api.jquery.com/on/

person Blazemonger    schedule 17.04.2014