javascript - 如何使用 jQuery 从所有 div 中删除一个类，而不仅仅是 sibling ？

Question

当用户单击它时，我使用 jQuery 将“selected”类添加到 div(它向缩略图添加红色边框)。同时我想从先前选择的 div 中删除该类。

如果所有 div 都是同级的，但文档中的其他 div 仍保持选中状态，我就可以使其工作。我正在设计和开发的页面要求 div 不能都是 sibling 。如何删除文档中任何位置先前选定的 div 上的“选定”类，而不仅仅是同级？

您可以在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

您可以使用组合选择器来获取具有 thumbnail 和 selected 类的所有 div 元素，然后删除 selected code> 类。(由于您再次将 selected 添加到当前缩略图，请忽略也使用 not())

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

演示:Fiddle