循环动态设置JQuery中的事件监听器（单击）

Question

我遍历一个自定义对象的数组，并为该数组中的每个对象创建一个带有on click事件监听器的按钮，以动态设置on click事件的结果。 换句话说，单击按钮A可能会导致警报“ foo”，单击按钮B可能会导致不同的行为-警报“ bar”。

我的JSHint linter说：“不要在循环中创建函数”。

我希望SO社区可以共享更好的设计模式来实现此目标（香草js或JQuery）。

查看小提琴 -这是我正在做的极其简化的版本，但说明了这一点。

Javascript（ES6）：

class Tool {
 constructor (name, mainFunction) {
  this.name = name;
  this.mainFunction = mainFunction;
 }
 getName() {
   return this.name;
 }
 getMainFunction() {
   return this.mainFunction;
 }
}

var hammer = new Tool('hammer', 'bang on nails');
var saw = new Tool('saw', 'cuts heavy wood');
var toolbox = [hammer, saw];

for (let i in toolbox) {
  $('.wrapper').append('<div class=\"'+toolbox[i].getName()+'  button\">'+toolbox[i].getName()+'</div>');
  $('.wrapper').on('click', '.'+toolbox[i].getName(), function() {
    alert(toolbox[i].getMainFunction());
   });
}

html

<div class="wrapper">
 Buttons:
</div>

Answer 1

您可以简单地将点击功能分配给共享类.button ，还可以将消息分配给data属性： DEMO

class Tool {
 constructor (name, mainFunction) {
  this.name = name;
  this.mainFunction = mainFunction;
 }
 getName() {
   return this.name;
 }
 getMainFunction() {
   return this.mainFunction;
 }
}

var hammer = new Tool('hammer', 'bang on nails');
var saw = new Tool('saw', 'cuts heavy wood');
var toolbox = [hammer, saw];

for (let i in toolbox) {
  $('.wrapper').append('<div data-message="'+toolbox[i].getMainFunction()+'" class=\"'+toolbox[i].getName()+'  button\">'+toolbox[i].getName()+'</div>');
}

  $('.wrapper').on('click', '.button', function() {
    alert($(this).data('message'));
   });