将类添加到没有 id 的元素答案

【问题标题】：Add class to an element without an id将类添加到没有 id 的元素
【发布时间】：2016-05-12 00:20:45
【问题描述】：

我有一个物品清单：

<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 来实现. 目标是显示“船员详细信息”部分，并将活动类添加到其父级。

【问题讨论】：

标签： javascript jquery

【解决方案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');
});

【讨论】：

感谢您的帮助和解释，我很困惑如何定位元素，现在我知道了，工作得很好！

【解决方案2】：

使用 jQuery：

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

【讨论】：

【解决方案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>

【讨论】：

感谢您的帮助，我很困惑如何选择元素。你的解决方案也很好，阻止我加载 jQuery