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']

---

编辑:不确定我是否在问题中遗漏了这个或者它是否被编辑了，但看起来你不是在要求按钮上的属性，而是在它之前的元素 em>。在那种情况下，您需要 $.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();