使用 THIS 选择器从按钮旁边的输入中检索值

Question

我运行遇到这个问题，我有两个兄弟姐妹，一个输入和一个调用函数以检索输入中的值的按钮，但它一直告诉我值未定义...

这是 "form"：

<li>
<input id="mem3" value="TestU4" disabled="">
<button id="del3" class="delmem" onclick="deleteBandMember();">remove</button>
</li>

这里是 jQuery 代码：

function deleteBandMember() {
  var mmbr = $(this).prev("input").val();  //<-RETURNS UNDEFINED
}

我需要使用此选择器，因为有太多动态创建的输入... 谢谢！

Answer 1

将 this 作为 deleteBandMember 函数中的参数传递，如下所示：-

HTML :-

<li>
<input id="mem3" value="TestU4" disabled="">
<button id="del3" class="delmem" onclick="deleteBandMember(this);">remove</button>
</li>

jQuery :-

function deleteBandMember(elem){
   var mmbr = $(elem).prev("input").val();
}

Demo

Answer 2

直接使用jQuery，您可以附加一个点击处理程序：

HTML:

<li>
<input id="mem3" value="TestU4" disabled="">
<button id="del3" class="delmem">remove</button>
</li>

JS:

$('#del3').click(function(){
  var mmbr = $(this).prev("input").val();
})

Answer 3

虽然 Kartikeya 是正确的。我建议不要使用 "onClick" 属性，这样做不再是一个好习惯。另外，您正在使用 jQuery，因此您可以利用它。所以你的代码看起来像：


$('#del3').click( function() {
  var mmbr =  $(elem).prev("input").val();
  // do more stuff. 
})

Answer 4

顺便说一句，因为这个问题有一个很好的答案，如果您的表单中有大量输入和按钮，您可能需要考虑 event delegation。 jQuery 让这变得非常简单。不是将事件附加到每个按钮，而是将一个事件附加到包含这些元素的元素（如 <form>）：

HTML

<form id="form">
...
  <li>
    <input id="mem3" value="TestU4" disabled=""></input>
    <button id="del3" class="delmem">remove</button>
  </li>
  <li>
    <input id="mem34" value="TestU44" disabled=""></input>
    <button id="del34" class="delmem">remove</button>
  </li>
...
</form>

JQUERY

$('#form').on('click', '.delmem', function() { deleteBandMember(this); });

DEMO

使用 THIS 选择器从按钮旁边的输入中检索值

Retrieve value from input next to a button using THIS selector

javascript

jquery

input

this

button