消除重复代码 re: lambda 循环参数传递

Question

问题

数组定义了以下元素：

var equipment = new Array( "bakeware", "cookware", "kitchenware", "utensils" );

存在将这些设备类型与可编辑字段关联起来的函数：

function register_equipment( equipment ) {
  $('#recipe-equipment-' + equipment).append(
    '<span class="edit-recipe-equipment"></span><br />' );

  $('.edit-recipe-equipment').editable( 'php/save.php', {
    onblur   : 'submit',
    style    : 'display: inline',
    maxlength: 15,
    size     : 10
  });

  return true;
}

这​​允许用户单击该字段并编辑其值。当用户完成编辑时，输入字段消失。

以下代码重复四次（每个设备项目一次）：

  $('#equipment-new-bakeware').click( function() {
    return register_equipment( 'bakeware' );
  });

这可行，但并不理想。

问题

如何编写代码才能不重复？

以下不起作用，但显示了删除重复的意图：

for( var i = 0; i < equipment.length; i++ ) {
  $('#equipment-new-' + equipment[i]).click( function() {
    return register_equipment( equipment[i] );
  });
}

谢谢！

Answer 1

快速答案是创建另一个范围来捕获正确的值。有点啰嗦，但这就是想法。

function createOnClick (i) {
  // i will be captured in this function and used below
  return function () {
    register_equipment( equipment[i] );
  };
}

for( var i = 0; i < equipment.length; i++ ) {
  $('#equipment-new-' + equipment[i]).click(createOnClick(i));
}

Answer 2

从单击对象的 id 中检索设备类型并使用：

var registerEquipment = function() {
    var equipmentType = $(this).attr('id').replace('equipment-new-', '');
    return register_equipment(equipmentType);
  };

for( var i = 0; i < equipment.length; i++ ) { 
  $('#equipment-new-' + equipment[i]).click(registerEquipment);
}

Answer 3

for( item in equipment ) { 
  $('#equipment-new-' + item).click = function () {
    register_equipment(item);
  }
}

尝试一下;)