Добавить класс к элементу без идентификатора

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> 

Когда я нажимаю на выбранную «экипаж сетку», я хотел бы добавить класс («активным») в его родитель-член экипажа, но я понятия не имею, как добиться этого, используя vanilla js или jQuery. Цель состоит в том, чтобы раскрыть часть «Детали экипажа» с активным классом, добавленным к его родительскому элементу.

Answer 1

Использование JQuery:

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

Answer 2

Как это ?:

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

Answer 3

Использование Document.querySelectorAll()

var crews = document.querySelectorAll('.crew-item'); 
 

 
if (crews) { 
 

 
    for (var i = 0; i < crews.length; i++) { 
 
    var grid = crews[i].querySelector('.crew-grid'); 
 

 
    grid.addEventListener('click', toggleActive, false); 
 
    } 
 
} 
 

 
function toggleActive() { 
 
    var grids = document.querySelectorAll('.crew-item'); 
 
    for (var i = 0; i < grids.length; i++) { 
 
    if (grids[i].classList.contains('active')) { 
 
     grids[i].classList.remove('active'); 
 
    } 
 
    } 
 

 
    this.parentNode.classList.add('active'); 
 
}

.crew-item.active { 
 
    background: #DDD; 
 
} 
 
.crew-grid:hover { 
 
    cursor: pointer; 
 
    background: #eee; 
 
}

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