用于突出显示当前元素的JQuery选择函数

我有一系列按钮，其功能类似于选项卡，但使用JQuery load

当前选择的按钮我希望有一个不同的类。当选择另一个元素时，我希望上一个元素的类返回到其上一个类

设置为“所有按钮”的类是.TABlink，它在加载脚本中用作按钮的选择器。控制这些链接的每个功能的类位于周围的范围内

概述

    <span class="TABbase"><a href="?accommodation" class="TABlink" onclick="return false">Accommodation</a></span> 

    <span class="TABbase"><a href="<?travel" class="TABlink" onclick="return false">Travel</a></span> 

有什么想法吗

---

奇妙的

所选课程的设置很简单：

//bind each 'button' so that on click, it is styled to be 'selected'
$('.TABlink').click(function(){select($(this))});

//Applies the selected style to the element
function select(el){
    $(el).addClass('.TABselected');
}

我可以想出两种取消选择的方法：

在为当前选定的“按钮”设置选定类之前，请从所有元素中删除该类

function deselectAll(){
    $('.TABlink').removeClass('.TABselected');
}

这是一个例子

跟踪最后选择的按钮，并在单击其他按钮时取消选择。对于一个简单的应用程序来说，这可能是太多的工作了。
更新我仍然在思考闭包，所以我不确定在不维护和检查全局变量的情况下如何执行此操作，但我今天又尝试了一次，我认为我已经找到了一些不错的方法。你可以去看看。代码如下：

var select = (function(){
//variable to store last selected 'button'
var selected;

return function (el){
        //selected is still accessible because of closure
        if(selected){
            $(selected).removeClass('TABselected');
        }
        $(el).addClass('TABselected');
        selected = el; //save this as the last selected
      }
})();

//bind each 'button' so that on click, it is styled to be 'selected'
$('.TABlink').click(function(){select($(this))});

---

我认为这是行不通的，因为当调用

$（'.TABlink'）。单击（…）

时，

this

将被限定在

this

的范围内。我想您应该在

选择
函数中调用
$（this）
，以获取触发事件的元素。@partkyle
此
将引用触发事件的元素。调用
click
只会为所有选中的元素设置click处理程序-然后处理程序将通过
此
获取实际单击的元素。看看我链接到的小提琴。然而，你的评论确实让我意识到我输入的代码中还有一些其他错误，我现在已经纠正了这些错误。@Drackir谢谢，我以为我已经抓住了最后一个错误了！没问题。您在第二个示例中也漏掉了一句话。：）另外，为什么要创建
select
函数呢？您可以直接在回调函数中调用该代码。事实上，我刚刚注意到，由于您这样做的方式，您实际上使用jQuery包装了元素两次
$（此）
作为
el
传递，然后执行
$（el）
。为什么不仅仅是：
$（'.TABlink'）。单击（function（）{$（this.addClass（'.TABselected'）；}）？啊！固定的。我通常只是将元素始终包装在jQuery中——如果传入的
$（）
已经是jQuery对象，那么不就是返回同一个jQuery对象吗？我需要看看这对性能有多大影响。另外，使用
select
函数的目的是让事情变得更清楚（希望如此），如果您选择使用我建议的第一个选项，那么调用
deselectAll（）
也是为了这个目的。尽管如此，您可以让匿名点击处理程序完成所有操作。。。