.addClass()无法正常工作

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)该功能获取单击的对象.在将其添加到单击的对象之前,您还可以从中删除所选的"选定"类.

例:

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