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

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

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

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

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

编辑：

预期的行为是，当用户更新输入字段时，更新的值被发送到

updateName（）

，而不是原始值

另外，请注意，数据id和值在输入上，而不是按钮上

像这样：

$('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（）方法获取

名称或数据id

：

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

---

但最好是对

data-*

属性使用data（）方法。

在事件处理程序中

这是未包装的DOM元素

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

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

。您可以在不这样使用的情况下实现相同的效果：

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

您也不必对数据使用jquery。在
$（domElement）.data（'foo'）
上等同于
domElement.dataset['foo']


编辑：不确定我是否在问题中遗漏了这一点，或者它是否被编辑了，但您似乎不是在询问按钮上的属性，而是询问它前面的元素。在这种情况下，你想要的是看起来像这样的东西

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

请注意，这假定输入元素位于按钮的正前方。如果要查找最接近的前一个输入元素，请使用

不确定为什么这里的答案试图在
按钮
元素上查找
输入
属性

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

我相信
prop
是名称属性的首选api。当处理程序连接到按钮时，它如何从输入中获取名称和id？我没有得到你的链接
在你的答案中使用
这是尴尬和糟糕的…@C-link？基本上，我的观点是，
这是javascript的一个不好的部分。它是一个与其他任何参数一样的参数（如果您只使用
.call（）
来调用函数，它会变得非常明显）。唯一的区别是1）您无法命名它，2）如果您使用调用的速记
fn（）
语法，javascript只是猜测它应该是什么。用一个常规参数来代替几乎总是比较好的。在这个答案中，我仍然没有做到这一点。（我不认为你的答案中有这一点，这不是关于
这个
）这只是这个问题的另一个答案-一个不依赖于尴尬的
这个
关键字的答案。如果你想问一个具体的问题，我可以进一步解释，但这需要等待一段时间，因为我必须马上离开，输入一个新名称后，我仍然会在HTML中获得设置的值。我希望得到更新后的值。@bseen
updateName（name，id）
“name”实际上是“value”吗？还是身份证？您是否使用HTML属性
name='name'
进行任何操作？如果不是，通常的设置是在
name
属性中包含
data id
中的内容。名称=值。名称是值。这里没有什么意义，因为我已经删除了其他变量和字段。。。
  var $prev = $(e.currentTarget).prevAll('input').last();

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

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