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()，而不是原始值。

另请注意，data-id和value在输入上，而不是按钮。

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();

Answer 2

像这样：

$('button.update').click(function() {
  name = $(this).attr('name');//to get value of name attribute
  id = $(this).data('id'); // to get value of attribute data-id
  updateName(name, id)
}

您也可以使用prop（）方法获取name or data-id：

name = $(this).prop('name');
id = $(this).prop('data-id');

但最好是对data-*属性使用data（）方法。

Answer 3

不确定为什么这里的答案会尝试在input元素上找到button属性...

<div id="container">
    <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>
</div>

委托事件仅附加到容器（仅选择那些具有.update类的子项），在它们“冒泡”时捕获它们。 previousElementSibling用于定位input，但如果布局更复杂，jQuery选择器也可用于查找它。

$('#container').on('click','.update',function(e) {
    updateName(
        e.currentTarget.previousElementSibling.name, 
        $(e.currentTarget.previousElementSibling).data('id')
    );
});

JSFiddle

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

3 个答案: