使用 JQuery 排除某些项目答案

【问题标题】：Using JQuery to exclude certain items使用 JQuery 排除某些项目
【发布时间】：2012-10-25 17:00:50
【问题描述】：

我有一系列触发 JQuery 动画的按钮，其中面板在页面底部下方向上滑动。面板绝对位于页面下方，当单击按钮时，相应的面板会动画。

该功能效果很好，但我只想在任何给定时间显示一个面板。

我的 HTML 是：

<div id="footerNav">
<a class="button" id="b1" href="#"><span></span>Upcoming Events</a>
<a class="button" id="b2" href="#"><span></span>From the Blog</a>
<a class="button" id="b3" href="#"><span></span>Global Leaders</a>
<a class="button" id="b4" href="#">Watch Video</a>
</div>

<div id="paneb1" class="pane"></div>
<div id="paneb2" class="pane"></div>
<div id="paneb3" class="pane"></div>

我的 Jquery 是：

$("a.button").toggle(function(){
     idClick = $(this).attr("id");
     newSelector = $("#pane"+idClick);
     newSelector.animate({ 'bottom' : 99});
     $(this).addClass("activeBtn");
}, function(){
     newSelector.animate({ 'bottom' : -275});
     $(this).removeClass("activeBtn");
});

我尝试像这样使用 not 选择器，但它不起作用：

$(".pane:not(newSelector)").animate({ 'bottom' : -275});

我需要在此处做什么才能在切换按钮时将任何 OTHER 面板动画化回其原始位置？

【问题讨论】：

标签： jquery jquery-animate toggle

【解决方案1】：

您可以使用not() 方法代替:not() 选择器：

$(".pane").not(newSelector).animate({ bottom : -275 });

注意，最好使用局部变量而不是全局变量，所以在定义新变量时考虑使用var关键字：

var newSelector = $("#pane" + idClick);

【讨论】：

因为是切换功能，所以有两个功能，一个是第一次点击，另一个是第二次点击。如果我添加了一个 var，它只会在它所在的函数中可用，对吗？

【解决方案2】：

试试：

$(".pane").not(newSelector).animate({ 'bottom' : -275});

由于您的版本没有引用您制作的 javascript var，因此它正在寻找名为“newSelector”的选择器。

【讨论】：