jQuery点击同class按钮获取对应字段值总返回第一个值如何解决

问题原因 #

你直接使用全局选择器$('.input-class')会匹配页面上所有带有input-class类的元素，jQuery的val()方法默认只返回第一个匹配元素的值，所以不管点击哪一行的按钮，都会返回第一行输入框的内容。

解决方法 #

点击按钮时先通过当前触发事件的按钮定位到它所在的行，再在该行范围内查找对应的表单元素即可，修正后的代码如下：

$('.btn').click(function(e) {
  e.preventDefault();
  // 定位当前按钮所在的tr行
  const currentRow = $(this).closest('tr');
  // 仅在当前行范围内查找对应表单元素
  const inputVal = currentRow.find('.input-class').val();
  const selectedAnimal = currentRow.find('.animals').val();
  // 示例输出，可根据实际需求修改后续逻辑
  alert(`输入值：${inputVal}，选中选项：${selectedAnimal}`);
})

补充说明 #

• $(this)指向当前被点击的按钮元素
• closest('tr')会向上查找最近的<tr>父元素，相比直接写多层parent()兼容性更强，后续修改DOM层级也不会失效
• find()方法只会在当前行的子元素中匹配目标类，不会干扰其他行的元素，就能准确获取对应行的数值

内容的提问来源于stack exchange，提问作者catLovers