javascript - 向没有 id 的元素添加类

Question

我有一个项目列表:

<div class="crew-item>
     <div class="crew-grid"></div>
     <div class="crew-detail></div>
</div>
<div class="crew-item>
     <div class="crew-grid"></div>
     <div class="crew-detail></div>
</div>
<div class="crew-item>
     <div class="crew-grid"></div>
     <div class="crew-detail></div>
</div>

当我单击选定的“crew-grid”时，我想向其“crew-item”父级添加一个类(“active”)，但我不知道如何使用 vanilla js 或 jQuery 来实现这一点。目标是揭示“船员细节”部分，并将事件类添加到其父级。

Answer 1

像这样吗？:

$('.crew-grid').on('click', function () {
    $(this).closest('.crew-item').addClass('active');
});

基本上，从单击的元素开始，获取与该选择器匹配的最近的祖先元素。您不需要 id 来定位元素，只需一种根据您拥有的信息(在本例中为单击的元素)识别它的方法。

如果您想同时停用其他元素:

$('.crew-grid').on('click', function () {
    $('.crew-item').removeClass('active');
    $(this).closest('.crew-item').addClass('active');
});