javascript - 如何使用每个函数 jQuery 在其父元素上添加类

Question

只是问你能告诉我如何实现它，当我单击按钮时，它应该只在其父 div 上添加类。目前，即使我单击第一个按钮，它也会添加父 div

$( ".main-btn" ).each(function(index) {
    $(this).on("click", function(){
        $(".main").addClass("addClass")
    });
});

.main {
  background: yellow;
  margin-bottom: 3px;
  height: 50px;
  
}

.main.addClass {
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div class="main-btn">Button</div>
</div>

<div class="main">
  <div class="main-btn">Button</div>
</div>

Answer 1

此处不需要 .each()，您只需通过 .closest() 从单击的元素引用父元素即可...

$(".main-btn").on("click", function() {
  $(this).closest(".main").addClass("addClass");
});

.main {
  background: yellow;
  margin-bottom: 3px;
  height: 50px;
  
}

.main.addClass {
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<div class="main">
  <div class="main-btn">Button</div>
</div>

<div class="main">
  <div class="main-btn">Button</div>
</div>

---

此外，you might not need jQuery

document.querySelectorAll(".main .main-btn").forEach((btn) => {
  btn.addEventListener("click", (e) => {
    e.target.closest(".main").classList.add("addClass");
  });
});