jQuery-添加类点击验证ID

Question

我试图将一个类添加到包含具有唯一ID的父容器的特定元素中。

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

超文本标记语言

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