如何让JavaScript点击函数遍历所有记录而非仅第一条

问题说明 #

开发商品购物车时，需要实现点击「Proceed To Checkout」按钮时，检查所有订购商品的数量是否超过库存余量，超出则显示对应提示。当前代码仅能检查第一条商品记录，无法遍历所有条目。

现有代码 #

Razor/HTML 代码 #

@foreach (var item in (List<Item>)Session["cart"])
{
    <tr>
      <td>
        @item.Pr.Product_Code
      </td>
      <td>
        @item.Pr.Description<br />
        <span class="text-left" id="errmsg"></span>
      </td>
      <td>
        <img src="~/Images/@item.Pr.ImageUrl" width="100" height="80" />
      </td>
      <td>
        <input type="text" value="@item.Qty" id="quantity" name="quantity" class="amtOrdered" /><br />
        <input type="text" value="@item.Pr.Qty_Available" id="qty-avbl" name="qty-avbl" class="amt-avbl" hidden />
      </td>
      <td class="btn-sctn">
        <button class="button">
           <i class="fa solid fa-trash-o"></i>
           @Html.ActionLink("Remove", "Delete", "ItemCart", new { id = item.Pr.ProductID },
                       new { onclick = "return confirm ('Are you sure you want to delete this item?');", @class = "remove" })
        </button>
        </td>
        <td></td>
     </tr>
  }
</table>
     <div></div>
     <hr />
     <p class="place-order">
        <input type="submit" class="checkout" value="Proceed To Checkout" id="checkQty" />
     </p>
     <p class="keep-shop">
        @Html.ActionLink("Continue Shopping", "ProductCatalog", "Products", "", new { @class = "shopping-link" })
     </p>
  }@*End of form*@
}@*End of if session*@

JavaScript 代码 #

<script type="text/javascript">
    $(document).ready(function () {
        $("#checkQty").click(function (event) {
            // Get the value of the input field with id
            let qty = document.getElementById("quantity").value;
            let avbl = document.getElementById("qty-avbl").value;
            let text;
                if (qty > avbl) {
                    event.preventDefault();
                    text = "There is not enough stock to order this amount";
                    document.getElementById("errmsg").innerHTML = text;
                    return false;
                }
                else {
                    text = "";
                }           
        });
    });
</script>

问题根源 #

1. ID重复：foreach循环生成的errmsg、quantity、qty-avbl元素使用了相同ID，而HTML中ID必须唯一，getElementById只会返回第一个匹配的元素，导致仅检查第一条记录。
2. 未遍历所有条目：代码仅获取单个元素的值，没有循环处理所有商品行。

修复步骤及代码 #

1. 修改Razor代码，替换重复ID为Class #

将循环内的重复ID改为Class，确保每个元素可被批量选择：

@foreach (var item in (List<Item>)Session["cart"])
{
    <tr class="cart-item">
      <td>
        @item.Pr.Product_Code
      </td>
      <td>
        @item.Pr.Description<br />
        <span class="text-left errmsg"></span>
      </td>
      <td>
        <img src="~/Images/@item.Pr.ImageUrl" width="100" height="80" />
      </td>
      <td>
        <input type="text" value="@item.Qty" name="quantity" class="amtOrdered" /><br />
        <input type="text" value="@item.Pr.Qty_Available" name="qty-avbl" class="amt-avbl" hidden />
      </td>
      <td class="btn-sctn">
        <button class="button">
           <i class="fa solid fa-trash-o"></i>
           @Html.ActionLink("Remove", "Delete", "ItemCart", new { id = item.Pr.ProductID },
                       new { onclick = "return confirm ('Are you sure you want to delete this item?');", @class = "remove" })
        </button>
        </td>
        <td></td>
     </tr>
  }

2. 修改JavaScript代码，遍历所有商品并检查 #

使用jQuery遍历每个购物车条目，逐个验证库存，并在对应位置显示错误：

<script type="text/javascript">
    $(document).ready(function () {
        $("#checkQty").click(function (event) {
            let isValid = true;
            // 清空所有之前的错误提示
            $(".errmsg").html("");
            
            // 遍历每个购物车商品行
            $(".cart-item").each(function() {
                // 获取当前行的订购量和库存
                let qty = parseInt($(this).find(".amtOrdered").val());
                let avbl = parseInt($(this).find(".amt-avbl").val());
                
                // 检查数量是否超出库存
                if (isNaN(qty) || qty > avbl) {
                    isValid = false;
                    $(this).find(".errmsg").html("There is not enough stock to order this amount");
                }
            });
            
            // 如果有验证失败，阻止表单提交
            if (!isValid) {
                event.preventDefault();
                return false;
            }
        });
    });
</script>

关键说明 #

• Class替代ID：通过Class批量选择元素，避免ID唯一性冲突。
• 遍历验证：使用each方法循环处理每个商品行，确保所有条目都被检查。
• 错误定位：将错误提示显示在对应商品的位置，提升用户体验。
• 类型转换：使用parseInt将输入值转为数字，避免字符串比较导致的逻辑错误。

内容的提问来源于stack exchange，提问作者Kip M.