は、私が項目のリストを持っているID

Question

なし要素にクラスを追加します。その 'クルーアイテム'の親ですが、私はどのようにバニラjsまたはjQueryを使用してそれを達成するための考えがありません。 目的は、アクティブなクラスを親に追加して、「クルーの詳細」の部分を明らかにすることです。 jQueryのを使用して

Answer 1

：このように

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