Question

我正在使用jQuery在用户点击它时为div添加“选定”类（它为缩略图添加了红色边框）。同时我想从之前选择的div中删除该类。

如果所有div都是兄弟，我可以使用它，但文档中的其他div仍然被选中。我正在设计和开发的页面要求div不能都是兄弟姐妹。如何删除文档中任何位置的先前选定div上的“selected”类，而不仅仅是兄弟姐妹？

您可以在jsfiddle上查看和编辑我的示例：http://jsfiddle.net/3s4dM/6/

jQuery的：

$(".thumbnail").click(function() {
    $(this).addClass("selected").siblings().removeClass("selected");
})

CSS：

.thumbnail {
    background: #dddddd;
    width: 42px;
    height: 42px;
    margin-bottom: 5px;
}

.thumbnail:hover {
    cursor: pointer;
}

.thumbnail.selected {
    width: 36px;
    height: 36px;
    border: 3px solid #C72D30;
}

HTML：

<section>

    <div class="thumbnail"></div>

</section>

<section>

    <div class="thumbnail"></div>

</section>

<section>

    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>

</section>

Answer 1

您可以使用组合选择器获取包含div和thumbnail类的所有selected元素，然后从中删除selected类。（因为您再次添加selected当前缩略图会忽略同样使用not()）

$(".thumbnail").click(function() {
    $('.thumbnail.selected').not(this).removeClass("selected")
    $(this).addClass("selected");
})

演示：Fiddle

Answer 2

您可以从包含selected的所有当前元素中删除类.selected，并将类selected添加到已点击的.thumnail元素：

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

<强> Updated Fiddle

Answer 3

试试这个？

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

Answer 4

如果有所有div，你可以这样做。

$(".thumbnail").click(function() {
    $('div').removeClass('selected');
    $(this).addClass("selected");
});

如何从所有div中删除一个带有jQuery的类，而不仅仅是兄弟姐妹？

4 个答案: