jquery从同一类中的字段中获取值[重复]

Question

我想在单击按钮时从每个字段中获取值。我得到的结果总是第一个。

我期望的是，当我单击另一个按钮时，它会显示不同的值。这是我的代码。

$('.btn').click(function(e) {
 e.preventDefault();
 var x = $('.input-class').val();
 alert(x)
})

<!-- assume the code inside loop !-->
<tr>
 <td><input type="text" value="1" class="input-class"></td>
 <td>
  <select name="animals" class="animals">
   <option value="cat">Cat</option>
   <option value="tiger">Tiger</option>
   <option value="lion">Lion</option>
  </select>
 </td>
 <td><button class="btn">Click</button></td>
</tr>
<tr>
 <td><input type="text" value="2" class="input-class"></td>
 <td>
  <select name="animals" class="animals">
   <option value="cat">Cat</option>
   <option value="tiger">Tiger</option>
   <option value="lion">Lion</option>
  </select>
 </td>
 <td><button class="btn">Click</button></td>
</tr>
<tr>
 <td><input type="text" value="3" class="input-class"></td>
 <td>
  <select name="animals" class="animals">
   <option value="cat">Cat</option>
   <option value="tiger">Tiger</option>
   <option value="lion">Lion</option>
  </select>
 </td>
 <td><button class="btn">Click</button></td>
</tr>

Answer 1

问题是因为在包含多个元素的 jQuery 对象上调用 val() 只会读取集合中第一个元素的值。

要实现您的要求，您可以使用 DOM 遍历将单击的按钮与其相关的input 关联起来。在这种情况下，使用 this 关键字来引用引发事件的元素以及 prev() 将起作用：

$('.btn').click(function(e) {
  e.preventDefault();
  var x = $(this).prev().val();
  console.log(x)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="1" class="input-class"> <button class="btn">Click</button>
<input type="text" value="2" class="input-class"> <button class="btn">Click</button>
<input type="text" value="3" class="input-class"> <button class="btn">Click</button>
<input type="text" value="4" class="input-class"> <button class="btn">Click</button>

---

更新：

鉴于您对问题中的 HTML 的更新，从同一表行中获取 input 的逻辑稍微复杂一些。您可以通过使用closest() 来获取最近的公共tr 父级，然后使用find() 来实现它：

$('.btn').click(function(e) {
  e.preventDefault();
  var x = $(this).closest('tr').find('.input-class').val();
  console.log(x)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="text" value="1" class="input-class"></td>
    <td>
      <select name="animals" class="animals">
        <option value="cat">Cat</option>
        <option value="tiger">Tiger</option>
        <option value="lion">Lion</option>
      </select>
    </td>
    <td><button class="btn">Click</button></td>
  </tr>
  <tr>
    <td><input type="text" value="2" class="input-class"></td>
    <td>
      <select name="animals" class="animals">
        <option value="cat">Cat</option>
        <option value="tiger">Tiger</option>
        <option value="lion">Lion</option>
      </select>
    </td>
    <td><button class="btn">Click</button></td>
  </tr>
  <tr>
    <td><input type="text" value="3" class="input-class"></td>
    <td>
      <select name="animals" class="animals">
        <option value="cat">Cat</option>
        <option value="tiger">Tiger</option>
        <option value="lion">Lion</option>
      </select>
    </td>
    <td><button class="btn">Click</button></td>
  </tr>
</table>

Answer 2

$('.input-class') 将收集具有该类名的所有元素。也许您想做一个 foreach 循环并一次从.input-class 获取价值。