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

我有你可能会认为是一个非常简单的jQuery问题。（我对此很新颖。）使用jquery的'.on'来定位，添加和删除类

我有一个菜单，由一堆<h2>组成，我希望每个菜单项在单击时移动到一侧，返回到原始位置时不同菜单项被点击。我正在用jQuery中的'animate'做这件事。我认为我可以通过在我的jQuery选择器中添加一个“.active”类并使用.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？

来源

2013-06-26 ethanjrt

删除该帖在动画时间动画（{左：“ - = 120像素”}，1000），并检查和兄弟姐妹（）不是，如果没有工作给你的HTML。代码来检查这个 –

它不会工作，因为$('.menu-item').not('.active')将过滤事件注册发生时的元素，然后我不认为任何菜单项都有活动分配给它的类。

的解决方案，您应该是

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

来源

2013-06-26 06:48:31

完美的作品，谢谢！ – ethanjrt

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

回答

相关问题