javascript - 每个选择器的 jQuery onclick

Question

当我单击 button div 时，我想将一个名为 active 的类添加到 popup div 中，该类具有相应的类名data-trigger 属性。

例如，如果我单击类名为 button-two 的 div，则具有 data-trigger="button-two" 的 div 应该获取类 事件。

问题:active 仅添加到最后一个 popup div。我怎样才能做到这一点？

这是我尝试过的:

$('.popup').each(function() {

  popupObj = $(this);
  var popupTrigger = popupObj.data("trigger");

  $('.' + popupTrigger).click(function() {
    popupObj.addClass('active');
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button-one">Test 1</div>
<div class="button-two">Test 2</div>
<div class="button-three">Test 3</div>

<div class="popup" data-trigger="button-one">Hello world</div>
<div class="popup" data-trigger="button-two">Hello there</div>
<div class="popup" data-trigger="button-three">Hello again</div>

Answer 1

这是因为您没有将 popupObj 声明为局部变量；它是全局的，因此它会在 each 的最后一次迭代中发生变化:它将在所有三个点击处理程序中引用该值。

请记住，each 将在调用任何点击处理程序之前执行所有迭代。

解决方案:使用var popupObj。这样每个点击处理程序都会引用它们的“自己的”变量。