Question

我正在尝试制作标签切换功能。

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

Answer 1

首先，如果它们都具有相同的功能，请使用该类绑定您的click事件。

您可以使用$(this)获取该功能中的被点击对象。您也可以删除所选的＆＃39;将所有类添加到单击的对象之前的所有类。

示例：

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

Answer 2

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');
}

Answer 3

这是一个正确的小提琴：

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/

Answer 4

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

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

也许就是你要找的！

.addClass（）无法正常工作

4 个答案: