с использованием jQuery '.on' для задания, добавления и удаления классов

Question

У меня есть то, что вы, вероятно, думаете, очень простой вопрос jQuery. (Я новичок в этом.)

У меня есть меню, состоящее из группы из <h2>, и я хотел бы, чтобы каждый пункт меню перемещался в сторону при нажатии, возвращаясь в исходное положение, когда другой пункт пункт меню. Я делаю это с анимацией в jQuery. Я думал, что могу сделать это, добавив класс «.active» и используя .not ('. Active') в селекторе jQuery, чтобы, если пользователь нажимает на элемент меню повторно, он не будет просто перемещаться по экрану; однако он работает неправильно, и я думаю, что это связано с тем, что смена классов не учитывается при использовании $(document).ready. Поэтому я пытаюсь использовать .on, но я барахтаюсь в терминологии. Я хотел использовать его с .not,, но я прочитал на этом сайте, что это невозможно сделать; поэтому я переключил все и попытался создать класс «. * in * active», но это тоже не работает для меня.

Оригинал $(document).ready код:

$(document).ready(function() { 
    $('.menu-item').not('.active').click(function() { 
     $(this).siblings('.active').animate({left: '-=120px'}, '1000'); 
     $(this).siblings('.active').removeClass('active'); 
     $(this).animate({left: '+=120px'}, '1000'); 
     $(this).addClass('active'); 
    }); 
}); 

Попытка использования .not:

$('.menu-item .inactive').on('click', function(event) { 
     $(this).siblings.not('.inactive').animate({left: '-=120px'}, '1000'); 
     $(this).siblings.not('.inactive').addClass('inactive'); 
     $(this).animate({left: '+=120px'}, '1000'); 
     $(this).removeClass('inactive'); 
}); 

Любые идеи о том, почему версия .not не работает, или (если это возможно), как я могу получить эту вещь работать только с использованием $(document).ready?

Answer 1

Это не сработает, потому что $('.menu-item').not('.active') будет фильтровать элементы при регистрации события, тогда я не думаю, что у какого-либо из элементов меню есть назначенный ему класс.

Решение вы должны иметь это

$(document).on('click', '.menu-item:not(.active)', function(){ 
    //do 
})