带有动态jQuery选择器的循环事件处理程序

Question

我想要的是点击#bt-1，改变#target-1的颜色，点击#bt-2，改变#target-2的颜色。我开始为每个#bt-n / #target-n编写一个特定的单击事件处理程序，但是随着站点变得越来越大，我考虑使用一个循环。我的方法是在jQuery选择器中使用带有变量的for循环。这是我的代码：

​

$(document).ready(function() {
  
  var total = $('.target').length;
  for(n=1; n<=total; n++) {
    var num = String(n);
    $('#bt-'+num).on('click', function() {
      $('#target-'+num).toggleClass('yellow');
    });
  }
  
});

.wrapper {
  display: flex;
  text-align: center;
}
.button, .target {
  padding: 20px;
  margin: 10px;
}
.button {
  background: gray;
}
#target-1 {
  background: red;
}
#target-2 {
  background: green;
}
#target-3 {
  background: blue;
}
.yellow {
  background: yellow !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div id="bt-1" class="button">
    <h1>Button 1</h1>
  </div>
  <div id="target-1" class="target">
    <h1>Target 1</h1>
  </div>
</div>
<div class="wrapper">
  <div id="bt-2" class="button">
    <h1>Button 2</h1>
  </div>
  <div id="target-2" class="target">
    <h1>Target 2</h1>
  </div>
</div>
<div class="wrapper">
  <div id="bt-3" class="button">
    <h1>Button 3</h1>
  </div>
  <div id="target-3" class="target">
    <h1>Target 3</h1>
  </div>
</div>

​

我不明白为什么它只针对最后一个#target-n，因为循环似乎在#bt-n上工作。我还考虑过使用数组，但不知道如何实现它。

我成功地使用了$(this).siblings('.target')...，它不需要for循环和in，而是每个.button / .target的父元素，在本例中是.wrapper 代码在这里。虽然这是一个很好的解决方案，但我想了解我做错了什么，以及如何正确地实现一个循环来实现这一点，而不使用父.wrapper。谢谢。

Answer 1

只有最后一个项受到影响的原因是，在任何事件触发之前，循环已经完成。因此，n保存循环中的最后一个值。要解决这个问题，您需要使用一个闭包：

for (n = 1; n <= total; n++) {
  (function(n) {
    $('#bt-' + n).on('click', function() {
      $('#target-' + n).toggleClass('yellow');
    });
  })(n);
}

尽管如此，一种更好的方法是避免循环，并使用DOM遍历来查找与单击的.button相关的.button，如下所示：

​

$('.button').click(function() {
  $(this).next('.target').toggleClass('yellow');
});

.wrapper {
  display: flex;
  text-align: center;
}
.button,
.target {
  padding: 20px;
  margin: 10px;
}
.button {
  background: gray;
}
#target-1 {
  background: red;
}
#target-2 {
  background: green;
}
#target-3 {
  background: blue;
}
.yellow {
  background: yellow !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div id="bt-1" class="button">
    <h1>Button 1</h1>
  </div>
  <div id="target-1" class="target">
    <h1>Target 1</h1>
  </div>
</div>
<div class="wrapper">
  <div id="bt-2" class="button">
    <h1>Button 2</h1>
  </div>
  <div id="target-2" class="target">
    <h1>Target 2</h1>
  </div>
</div>
<div class="wrapper">
  <div id="bt-3" class="button">
    <h1>Button 3</h1>
  </div>
  <div id="target-3" class="target">
    <h1>Target 3</h1>
  </div>
</div>

​

Answer 2

注册许多事件处理程序是不明智的。您可以绑定一个事件处理程序，并对从元素id读取的特定idx执行操作，例如：

$('body').on('click', function (event) {
    if (!event.target.id.match(/^bt-\d+/)) {
        return; //id of clicked element does not match bt-{number}
    }

    var idx = event.target.id.replace('bt-', ''); //remove prefix "bt-" and leave only numeric postfix

    $('#target-' + idx).toggleClass('yellow');
});

解释：

当您在click元素上绑定body时，您可以从没有取消传递该事件的子元素中访问所有click事件。元素，该元素已在event.target中保存，并在event.target.id中具有属性id。

在这个id属性上，我用正则表达式调用match函数-它将匹配字符串，该字符串从bt-启动bt-，并且有任意数字的\d，至少有一个+。

if (!event.target.id.match(/^bt-\d+/)) {
    return; //id of clicked element does not match bt-{number}
}

这个语句是否定的，所以如果这个id不是格式的bt-someNumber，它就不会更进一步。

var idx = event.target.id.replace('bt-', '');

而不是接受id，并在其中用空字符串''替换bt-部件。

$('#target-' + idx).toggleClass('yellow');

最后，您将在元素上切换类，该元素与按钮的编号相同，但前缀不同的是target-，而不是bt-。

黑客行动愉快！