如何使用 jQuery 从所有 div 中删除类，而不仅仅是兄弟姐妹

Question

当用户单击它时，我正在使用jQuery将"选定"类添加到div（它会为缩略图添加红色边框）。同时，我想从先前选择的div中删除该类。

如果所有div 都是兄弟姐妹，但我可以让它工作，但文档中的其他div 仍处于选中状态。我正在设计和开发的页面要求div不能都是兄弟姐妹。如何删除文档中任何位置先前选择的div 上的"选定"类，而不仅仅是兄弟姐妹？

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

j查询：

$(".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");
})

演示：小提琴

Answer 2

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

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

更新的小提琴

Answer 3

试试这个？

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

Answer 4

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

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