.addClass（）不能正常工作

HTML：

 <span id="t1" class="location">Random</span> 
     <span id="t2" class="location">Text</span> 
     <span id="t3" class="location">TextText</span> 
     <span id="t4" class="location">Asdf</span> 
     <span id="t5" class="location">Fdsa</span> 
     <span id="t6" class="location">Asdf</span> 
     <span id="t7" class="location">Random</span>

CSS：

.selected { 
    border-bottom:1px solid blue; 
    color:blue; 
} 
.location { 
    border-right:1px solid black; 
    margin-left:8px; 
    padding-right:8px; 
    cursor:pointer; 
}

的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'）它的作品。我不知道我能做什么错。

来源

2014-03-27 123321123321

您正在切换课程，然后再次切换回来！总的来说，没有效果。切换两个开关语句，以便在更改previousNumber –

中的值之前切换上一个选项卡*，并且您应该真正考虑重构代码 –

此代码可以大大简化。 – Mathletics

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

但是，是的，你的代码可以真正使用一些严重的重构。你应该可以使用一个单一的click处理程序来处理所有的选项卡，而不是附加到每个单独的选项卡上。

喜欢的东西：

var previousTab; 

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

来源

2014-03-27 20:46:06

哇，谢谢，我不敢相信我犯了这个简单的错误。 – 123321123321

@ 123321123321：希望我可以说我从来没有犯过这个错误...... –

首先，如果它们都具有相同的功能，使用类点击事件绑定。

您可以使用$(this)获取该功能中的单击对象。在将其添加到单击的对象之前，您也可以从全部中删除“选定”类。

例子：

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

来源

2014-03-27 20:48:28 bcarn

你可能缓存'$（'。location'）'而不是强迫jQuery每次重建它。 –

缓存'$（'。location'）'或者甚至绑定到最初的缺点是它使得页面动态性降低。如果你想用'location'类添加一个新的对象，它将不会以相同的方式运行。你可以做一些像$（document）.on（“click”，“.location”，function（）{$（“。location”）。not（$（this）.addClass（“selected”））。removeClass （“selected”）;}）;' – redbmk

您可以/应该将$（this）缓存到var中，然后使用它来查找自己的.location.selected兄弟，然后使用它将选定的内容添加到自身。如果DOM变大，那么使用内部$（'。location'）重新获得整个DOM可能代价高昂。 – Brocco

这里是一个正确的soution小提琴：

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

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

http://jsfiddle.net/YYq4U/1/

来源

2014-03-27 20:49:37 Brocco

我试试这个：http://jsfiddle.net/WV9ZQ/

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

也许是你在找什么！

来源

2014-03-27 20:52:18

.addClass（）不能正常工作

回答

相关问题