Question

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

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

问题：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。这样，每个点击处理程序都会引用其“自有”变量。

Answer 2

对按钮..也使用data属性的简单方法..仅对按钮进行一次单击事件。.请参见下一个示例

$('.button[data-to-trigger]').on('click' , function(){
    var GetTriggerDiv = $(this).attr('data-to-trigger');
    $('.popup').removeClass('active').filter('.popup[data-trigger="'+GetTriggerDiv+'"]').addClass('active');
});

.active{
  background : red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button" data-to-trigger="button-one">Test 1</div>
<div class="button" data-to-trigger="button-two">Test 2</div>
<div class="button" data-to-trigger="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 3

jQuery中的“每个”函数返回2个值：索引和元素。尝试使用返回的元素代替$（this）。

from itertools import groupby
data = {('age', 'Low', 'Pos')  :    3 ,
        ('age', 'High', 'Pos')  :    11 ,
        ('age', 'Low', 'Neg')  :     8 ,
        ('age', 'High', 'Neg')  :    8 ,
        ('sex', 'male', 'Pos')  :    13 ,
        ('sex', 'female', 'Pos')  :  1 ,
        ('sex', 'male', 'Neg')  :    10 ,
        ('sex', 'female', 'Neg')  :  6}

sorted_keys = sorted(data.keys())
index_groups = {k: list(m) for k, m in groupby(sorted_keys, lambda x: x[:2]}

# index_groups is a dict of list with all keys grouped by index 0, 1

Answer 4

这是一个解决方案，使用两个触发器的相同数据触发器将弹出窗口与按钮匹配：

$(document).ready(function() {
  $(".btn").click(function() {
    var trigger = $(this).data("trigger");
    $('.popup').each(function() {
      if ($(this).data("trigger") == trigger) {
        $(this).addClass('active');
      } else {
        $(this).removeClass('active');
      }
    });
  });

});

.active {
  background-color: coral;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="btn" data-trigger="button-one">Test 1</div>
<div class="btn" data-trigger="button-two">Test 2</div>
<div class="btn" data-trigger="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>

jQuery onclick in每个选择器

4 个答案: