将类添加到没有id的元素中

Add class to an element without an id

本文关键字：id 元素 添加      更新时间：2023-09-26

我有一个项目列表：

<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来实现这一点。目标是揭示"船员细节"部分，将活动类添加到其父类中。

像这样？：

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

使用jQuery:

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

使用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>

相关文章：