0

我正在尝试更改几个 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);
}
4

4 回答 4

5

您应该尝试另一种添加和删除类的方法，试试这个：

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

更新了 JsFiddle

于 2013-11-08T02:07:31.193 回答
0

已经发布了一些答案，建议需要一些重构的解决方案，例如向selected选定元素添加类而不是单独的selector-box-selected和selector-box类。

虽然我认为您应该执行重构，因为它可以使整体设计更好并减少 CSS 代码重复，但这里有一个无需重构代码的解决方案。

我跟踪了最后一个选定的元素，以避免遍历所有框以删除选定的类。

演示

var selectedBox = $('.selector-box-selected').get();

$('.selector-box').add(selectedBox).click(function () {

    if (selectedBox === this) return;

    selectedBox = $([this, selectedBox])
        .toggleClass('selector-box-selected')
        .toggleClass('selector-box')
        .get(0);
});
于 2013-11-08T02:28:51.560 回答
0

我改变了你的代码

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

$("div[name=ss]").click(function () {
    $("div[name=ss]").removeClass("selector-box-selected").addClass("selector-box");
    $(this).removeClass("selector-box").addClass("selector-box-selected");
});

不要介意名称SS，将其更改为您想要的名称：D

于 2013-11-08T02:00:55.230 回答
0

无法再次选择第一个的问题是 click 事件没有链接到它，因为您只将它应用于<div>具有 class 的元素.selector-box。除此之外，CSS似乎很好，检查小提琴：http: //jsfiddle.net/9FZcz/2/

于 2013-11-08T02:01:11.190 回答