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>

当我点击选定的＆＃39;船员网格＆＃39;我想在其工作人员项目中添加一个课程（＆＃39;有效的＆＃39;）＆＃39;父，但我不知道如何使用vanilla js或jQuery实现这一点。目标是揭示船员细节＆＃39; part，将活动类添加到其父级。

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

Answer 2

使用jQuery：

$('.crew-grid').click(function() { 
    $(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>

将类添加到没有id的元素

3 个答案: