javascript - 如何在多个元素上处理相同的 jQuery 事件处理程序？

Question

假设您有以下代码来更新许多元素:

<div class='item'>
  Name:<input type='text' name='name' data-id='123' value='Name 1'>
  <button class='update'>update</button>
</div>

<div class='item'>
  Name:<input type='text' name='name' data-id='456' value='Name 2'>
  <button class='update'>update</button>
</div>

和 JavaScript 来处理更新:

function updateName(name, id){
  ...
}

可以找到值和 id 并调用 updateName 的 jQuery 处理程序是什么？

$('button.update').click(function() {
  name = ?
  id = ?
  updateName(name, id)
}

编辑:

预期的行为是，当用户更新输入字段时，更新后的值将发送到 updateName()，而不是原始值。

另请注意，数据 ID 和值位于输入上，而不是按钮上。

http://jsfiddle.net/e3g6nfc1/8/

Answer 1

事件处理程序内部 this是展开的 DOM 元素

$('button.update').click(function() {
  var name = this.name
  var id = $(this).data('id');
  updateName(name, id)
}

请注意，您想要 var在这种情况下，否则 name和id跳出该函数的范围并可能成为全局变量。

I've argued before that this is awkward and bad to use 。您可以像这样不使用它来达到相同的效果:

$('button.update').click(function(e) {
  var name = e.currentTarget.name
  var id = $(e.currentTarget).data('id');
  updateName(name, id)
}

您也不必使用 jquery 来获取数据。上reasonably modern browsers $(domElement).data('foo')相当于 domElement.dataset['foo']

<小时/>

编辑:不确定我是否在问题中遗漏了这一点，或者它是否已被编辑，但似乎您要求的不是按钮上的属性，而是它之前的元素。在这种情况下你想要 $.fn.prev 看起来像这样

$('button.update').click(function(e) {
  var $prev = $(e.currentTarget).prev();
  updateName($prev.name, $prev.data('id'))
}

请注意，这假设输入元素位于按钮之前。如果你想找到最近的前面的输入元素，你可以使用 $.fn.prevAll

  var $prev = $(e.currentTarget).prevAll('input').last();