Javascript .addClass（）工作不正常

我想做一个标签切换功能

HTML:

Javascript:

$(document).ready(function(){
    $("#t1").click(function(){switchTabs(1)});
    $("#t2").click(function(){switchTabs(2)});
    $("#t3").click(function(){switchTabs(3)});
    $("#t4").click(function(){switchTabs(4)});
    $("#t5").click(function(){switchTabs(5)});
    $("#t6").click(function(){switchTabs(6)});
    $("#t7").click(function(){switchTabs(7)});
});
var previousNumber;

function switchTabs(number) {
    $("#t" + number).toggleClass('selected');
    previousNumber = number;
    $("#t" + previousNumber).toggleClass('selected');
    }

当我单击任何跨度时，它不会做任何事情。但是如果我使用$（“#t1”）.toggleClass（'selected'），它会工作。我不知道我会做错什么

function switchTabs(number) {
    $("#t" + previousNumber).toggleClass('selected');     // Do this BEFORE you update previousNumber!!!
    $("#t" + number).toggleClass('selected');
    previousNumber = number;
}

但是，是的，你的代码确实需要一些认真的重构。您应该能够使用一个

单击

处理程序来处理所有选项卡，而不是附加到每个单独的选项卡

比如：

var previousTab;

$('.location').click(function() {
     if (previousTab) {
         previousTab.toggleClass('selected');
     }
     previousTab = $(this);
     previousTab.toggleClass('selected');
}

---

首先，如果它们都具有相同的函数，则使用该类绑定单击事件

您可以使用

$（this）

在该函数中获取单击的对象。您还可以在将“selected”类添加到单击的对象之前从所有对象中删除该类

例如：

$('.location').click(function() {
     $('.location').removeClass('selected')
     $(this).addClass('selected');
}

---

这是一把拨弄正确音调的小提琴：

function switchTabs(number) {
    var t = $("#t" + number)
    if (t.hasClass('selected')){
        return;
    }

    t.siblings('.location.selected').removeClass('selected');
    t.addClass('selected');
}

我尝试以下方法：

---

也许这就是你要找的

您正在切换该类，然后再次切换回该类！总的来说，没有效果。切换两个切换语句，以便在更改

previousNumber

中的值之前切换上一个选项卡，并且您应该真正考虑重构代码这段代码可以大大简化。哇，谢谢，我简直不敢相信我犯了那个简单的错误。@123321123321:但愿我能说我从来没有犯过那个错误……你可以缓存

$（'.location'）

，而不是每次强制jQuery重新构造它。缓存

$（'.location'）

，甚至最初绑定到

$（'.location'）

的缺点是它会降低页面的动态性。如果要使用

location

类添加新对象，它的行为将不一样。您可以执行类似于

$（document）的操作。在（“click”、“.location”上，函数（）{$（“.location”）。而不是（$（this.addClass（“selected”））.removeClass（“selected”）；}）您可以/应该将$（this）缓存到一个var中，然后使用它来查找自身的兄弟，这些兄弟是.location.selected，然后使用它将selected添加到自身中。如果DOM变大，则使用内部$（'.location'）重新查询整个DOM的成本可能会很高。
$('.location').click(function() {
     $('.location').removeClass('selected')
     $(this).addClass('selected');
}

function switchTabs(number) {
    var t = $("#t" + number)
    if (t.hasClass('selected')){
        return;
    }

    t.siblings('.location.selected').removeClass('selected');
    t.addClass('selected');
}

function switchTabs(number) {
//$("#t" + number).toggleClass('selected');
if (previousNumber != null) {
    previousNumber.removeClass('selected');
}
previousNumber = $("#t" + number);
    $("#t" + number).addClass('selected');
}