javascript - 在 jQuery 中更改 CSS 类

Question

我正在尝试更改几个 DIV 的 CSS 类，下面链接是我的 jFiddle

唯一的变化是 -selected 类实际上有一个背景图像，它似乎具有 -non-selected 类的背景颜色。

另一个问题是选择另一个div后，你不能再选择第一个。 jQuery 究竟对这些类做了什么？当我将 -non-selected 类添加到它时，它应该再次变为可选择的，对吧？

http://jsfiddle.net/9FZcz/

jQuery

$(".selector-box").click(function () {
    $(".selector-box-selected").removeClass("selector-box-selected").addClass("selector-box");
    $(this).removeClass("selector-box").addClass("selector-box-selected");
});

HTML

<div class="selector-box-selected"></div>
<div class="selector-box"></div>
<div class="selector-box"></div>
<div class="selector-box"></div>

CSS

.selector-box{
    margin-bottom:2px;
    width:328px;
    height:46px;
    background-color:rgba(255,255,255,.25);
}
.selector-box-selected{
    margin-bottom:2px;
    width:351px;
    height:46px;
    background-image:url(../images/layout/SelectedArrow.png);
}

Answer 1

你应该尝试另一种方法来添加和删除类，试试这个:

$(".selector-box").click(function () {
    $('.selector-box').removeClass("selected");
    $(this).addClass("selected");
});

Updated JsFiddle