使用jquery的'.on'来定位，添加和删除类

Question

我有你认为这是一个非常简单的jQuery问题。 （我对此很新。）

我有一个由一堆<h2>组成的菜单，我希望每个菜单项在单击时移动到一侧，当不同单击菜单项。我在jQuery中用'animate'做这个。我想我可以通过添加一个“.active”类并在我的jQuery选择器中使用.not（'。active'）来做到这一点，这样如果用户反复点击菜单项，它就不会继续在屏幕上移动;但是，它没有正常工作，我认为这是因为当我使用$(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
})