JQuery

Question

我正在尝试将 class 添加到包含具有唯一 ID 的父容器的特定元素。

我有几个按钮包含在一个 div 中，它们都使用相同的 classes。出于某种原因，我不能只使用 $(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 返回正确的信息。但是，出于某种原因，我无法添加 class.

提前感谢您的帮助！ (:

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

示例： $("#btn-1 .btn").addClass("活动");但 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>

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

JQuery - Add class on click verifying ID

html

javascript

frontend