Question

我有一个简单的问题，但我找不到如何在任何地方这样做。我已经阅读了jquery文档，但没有关于此的信息。

我有一个包含生成字段的表，一行包含一对文本和按钮元素。

<input type="text" class="input-text" value="10">
<input type="button" class="input-button">

我想在单击按钮时从文本字段中获取值。因为它们是生成的，所以我必须使用.on（）函数。

$('#input-here').on('click', '.input-button', function(event) {
   var value = $('.input-text').val();
   alert(value);
   return false;
});

我可以从文本字段的第一行获取值。如果第1行是“10”，第2行是“20”，如果我点击其他行中的按钮，警告只会显示“10”。

有没有办法让我能正确获得价值？

Answer 1

您可以使用jQuery's prev() method来拉取上一个元素：

var value = $(this).prev().val();

给定一个表示一组DOM元素的jQuery对象，.prev()方法在DOM树中搜索每个元素的前导，并从匹配元素构造一个新的jQuery对象。

嗨，我刚试过这个。我得到了＃undefined＆＃39;

问题中提供的标记必须与您在网页上使用的标记不同。这是一个演示此工作的演示：

＆＃13;

$('body').on('click', '.input-button', function(event) {
   var value = $(this).prev().val();
   alert(value);
   return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <input type="text" class="input-text" value="Foo">
  <input type="button" class="input-button">
</div>
<div>
  <input type="text" class="input-text" value="Bar">
  <input type="button" class="input-button">
</div>

＆＃13;

Answer 2

您可以使用prev()函数获取上一个元素。假设您的标记与问题类似。

$('#input-here').on('click', '.input-button', function(event) {
   var value = $(this).prev('.input-text').val();
   alert(value);
   return false;
});

Answer 3

试试这个

$('#input-here').on('click', '.input-button', function(event) {
   var value = $(this).closest('input').find('.input-text').val();
   alert(value);
   return false;
});

你的问题是你有多个这样的输入

<input type="text" class="input-text" value="10">
<input type="button" class="input-button">

因此，如果你创建一个$('.input-text')，它将获得所有输入元素，而.val()将获得第一个元素的值，这就是每次获得相同值的原因。

Answer 4

谢谢大家的代码，我已经尝试了所有的代码，但我得到了＃undefined＆＃39;来自所有这些。

来自@Anto Subash的代码激励我获得这个解决方案。

var value = $(this).parent().find('.input-text').val();

如何使用jquery.on（）获取其他字段值

4 个答案: