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

【问题标题】：Retrieve value from input next to a button using THIS selector使用 THIS 选择器从按钮旁边的输入中检索值
【发布时间】：2023-12-23 08:34:01
【问题描述】：

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

这是“表格”：

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

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

【问题讨论】：

标签： javascript jquery button input this

【解决方案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

【讨论】：

【解决方案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();
})

【讨论】：

【解决方案3】：

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


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

【讨论】：

【解决方案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

【讨论】：

很棒的答案！这是非常有用的信息，因为我发现将事件处理程序附加到每个单独的项目是不可能的！