javascript - 如何使用jquery从多个数据中获取单个数据值

Question

我被 jQuery 问题困住了。我想我在这段代码中出错了。请帮忙。

我正在尝试通过单击更新按钮来获取输入框的值。但每次我只得到第一个数字。

我想要根据更新按钮的文本值。

$(".update").click(function(){
    qty = $(".qty").val();  
    alert(qty);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td><input type="text" name="qty" value="5" class="qty" id="qty"/></td>
        <td><button class="update">&#x21BB;</button></td>
    </tr>
    <tr>
        <td><input type="text" name="qty" value="20" class="qty" id="qty"/></td>
        <td><button class="update">&#x21BB;</button></td>
    </tr>
    <tr>
        <td><input type="text" name="qty" value="30" class="qty" id="qty"/></td>
        <td><button class="update">&#x21BB;</button></td>
    </tr>
    <tr>
        <td><input type="text" name="qty" value="50" class="qty" id="qty"/></td>
        <td><button class="update">&#x21BB;</button></td>
    </tr>
    <tr>
        <td><input type="text" name="qty" value="45" class="qty" id="qty"/></td>
        <td><button class="update">&#x21BB;</button></td>
    </tr>
    <tr>
        <td><input type="text" name="qty" value="15" class="qty" id="qty"/></td>
        <td><button class="update">&#x21BB;</button></td>
    </tr>
    <tr>
        <td><input type="text" name="qty" value="70" class="qty" id="qty"/></td>
        <td><button class="update">&#x21BB;</button></td>
    </tr>
</table>

Answer 1

您必须将您的更新按钮“链接”到您要关联的输入“.qty”

$(".update").click(function(){
	qty = $(this).closest("tr").find(".qty").val();	
	alert(qty);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
	<tr>
  		<td><input type="text" name="qty" value="5" class="qty" id="qty"/></td>
		<td><button class="update">&#x21BB;</button></td>
  	</tr>
	<tr>
  		<td><input type="text" name="qty" value="20" class="qty" id="qty"/></td>
		<td><button class="update">&#x21BB;</button></td>
  	</tr>
	<tr>
  		<td><input type="text" name="qty" value="30" class="qty" id="qty"/></td>
		<td><button class="update">&#x21BB;</button></td>
  	</tr>
	<tr>
  		<td><input type="text" name="qty" value="50" class="qty" id="qty"/></td>
		<td><button class="update">&#x21BB;</button></td>
  	</tr>
	<tr>
  		<td><input type="text" name="qty" value="45" class="qty" id="qty"/></td>
		<td><button class="update">&#x21BB;</button></td>
  	</tr>
	<tr>
  		<td><input type="text" name="qty" value="15" class="qty" id="qty"/></td>
		<td><button class="update">&#x21BB;</button></td>
  	</tr>
	<tr>
  		<td><input type="text" name="qty" value="70" class="qty" id="qty"/></td>
		<td><button class="update">&#x21BB;</button></td>
  	</tr>
</table>