JQuery - 在点击验证 ID 时添加类

Question

我正在尝试向包含具有唯一 ID 的父容器的特定元素添加一个类。

我有几个按钮包含在一个 div 中，它们都使用相同的类。出于某种原因，我不能只使用 $(this)，所以我创建了一个循环，将唯一 ID 添加到容器中。

HTML

<div class='section'>
 <div class='btn-container' id='btn-1'>
  <button class='btn'></button>
 </div>
 <div class='btn-container' id='btn-2'>
  <button class='btn'></button>
 </div>
 <div class='btn-container' id='btn-3'>
  <button class='btn'></button>
 </div>
</div>

jQuery

$("button").click(function (e) {
  e.preventDefault();

  var target = $(e.target).parents(".button-container").attr("id");
  console.log(target);
  $(target).find(".btn").addClass("active");

});

我以 ID 为目标，它可以工作，console.log 会返回正确的信息。但是，由于某种原因，我无法添加该类。

提前感谢您的帮助！ （：

编辑： 我正在尝试将活动类添加到 ID 中包含的按钮。

示例： $("#btn-1 .btn").addClass("active");但 ID 会根据点击的信息动态填充。

Answer 1

保持简单，这应该可以工作

$(document).ready(function() {
 
  $("button").click(function (e) {
  e.preventDefault();

  $(e.target).addClass("active")

});
});

.active{
  border: 1px red solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='section'>
 <div class='btn-container' id='btn-1'>
  <button class='btn'>Test</button>
 </div>
 <div class='btn-container' id='btn-2'>
  <button class='btn'>Test</button>
 </div>
 <div class='btn-container' id='btn-3'>
  <button class='btn'>Test</button>
 </div>
</div>