在PHP循环生成页面中用jQuery获取指定数字输入框的值

我正在制作一款产品库存系统，支持通过数字输入框修改数值，点击勾选按钮完成操作，但目前无法获取对应输入框的特定值。尝试过form GET、href链接等方法，均未得到预期结果。

现有代码 #

PHP代码 #

<?php
    $get_prod = $con->query("SELECT * FROM products");
    while($get = mysqli_fetch_array($get_prod)){
        echo '
        <div class="prod-inv">
    <div class="prod-inv-top">
        <h1>'.$get['prod_name'].'</h1>
        <h2>'.$get['prod_price'].'</h2>
    </div>
    <div class="prod-inv-body">
        <img class="image-manage" src="'.$get['prod_cover'].'">
        <input id="'.$get['prod_id'].'" type="number" class="num" value="1"/>
        <button id="'.$get['prod_name'].'" class="btn search">&#x2713;</button></a>
     </div>
        </div>';
    }
?>

jQuery代码 #

<script type="text/javascript">
    $("button").click(function() {
        var target = this.id;
        var value = $(target).val();;
        alert(value);
    });
</script>

问题分析 #

现有jQuery代码存在两个核心问题：

1. var target = this.id;获取的是按钮的ID（即产品名称），但输入框的ID是产品ID，两者不匹配，导致$(target)找不到对应的输入框。
2. 按钮的ID使用产品名称存在风险：若产品名称包含空格、特殊字符，会导致ID无效，不符合HTML规范。

修正方案 #

步骤1：优化HTML结构（可选但推荐） #

给按钮添加data-prod-id属性关联产品ID，同时移除无效的</a>标签：

<?php
    $get_prod = $con->query("SELECT * FROM products");
    while($get = mysqli_fetch_array($get_prod)){
        echo '
        <div class="prod-inv">
    <div class="prod-inv-top">
        <h1>'.$get['prod_name'].'</h1>
        <h2>'.$get['prod_price'].'</h2>
    </div>
    <div class="prod-inv-body">
        <img class="image-manage" src="'.$get['prod_cover'].'">
        <input id="prod-'.$get['prod_id'].'" type="number" class="num" value="1"/>
        <button data-prod-id="'.$get['prod_id'].'" class="btn search">&#x2713;</button>
     </div>
        </div>';
    }
?>

（注：给输入框ID添加前缀prod-，避免ID与其他元素冲突）

步骤2：修正jQuery代码 #

提供两种可靠的取值方式：

方式1：通过DOM层级关系查找（简洁高效）

利用按钮与输入框的同级关系，直接获取相邻的输入框值：

<script type="text/javascript">
    $(".btn.search").click(function() {
        // 获取当前按钮同级的.num输入框的值
        var inputValue = $(this).siblings(".num").val();
        alert(inputValue);
    });
</script>

方式2：通过data属性关联查找（更健壮）

通过按钮的data-prod-id属性，精准定位对应输入框：

<script type="text/javascript">
    $(".btn.search").click(function() {
        // 获取按钮关联的产品ID
        var prodId = $(this).data("prod-id");
        // 查找对应输入框并取值
        var inputValue = $("#prod-" + prodId).val();
        alert(inputValue);
    });
</script>

两种方式均可解决问题，推荐方式2，即使后续DOM结构调整，只要data-prod-id和输入框ID对应，就能正常工作。

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