JQuery 不选择输入值 ASP.Net Core MVC

Question

我对 JQuery 没有经验，希望得到您的帮助。我正在尝试将库存添加到现有产品中。控制器中的操作被正确调用。我的目标是在用户输入的库存小于 1 时发出弹出警报。当我尝试为列表中的第一项添加库存时，它可以完美运行！请参见下面的示例 1。

Example 11:https://i.stack.imgur.com/j39fj.png

但是，当我尝试对列表中的第二项进行相同操作时，输入的库存编号的值没有被提取。你能帮我找出我缺少的东西吗？为什么这个号码只是第一次被拿起，而不是列表中的第二个？请看下面的例子2。Example 2

Example 2 JQuery debugging

您也可以参考以下代码。

在视图中：

<tbody>
@foreach (var item in Model) {
        <tr>
            <th>
                @Html.DisplayFor(modelItem => item.ProductCode)
            </th>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Description)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Stock)
            </td>
            <td>
                @{
                    var temp = (Math.Truncate(item.Price * 100) / 100).ToString("n2");
                    @Html.DisplayFor(model => temp)
                }
            </td>
            <td>
                <a id="editLink" asp-action="Edit" asp-route-id="@item.ProductCode">Edit</a> |
                <a class="deleteLink" asp-action="Delete" asp-route-id="@item.ProductCode">Delete</a>
            </td>
            <td>
                @using (Html.BeginForm("AddStock", "Livestock", FormMethod.Post))
                {
                <p>
                    <input type="hidden" name="id" value="@item.ProductCode">
                    <input type="hidden" name="pName" value="@item.Name">
                    <input type="number" name="stock" id="inputStock">
                    <input type="submit" value="Add Stock" class="btn btn-primary" id="go"/>
                </p>
                }
            </td>
        </tr>
  }
</tbody>

在 site.js 文件中

//Stock
$(document).on('click', '#go', function (event) {
    var numberIn = $('input[name=stock]').val();
    var name = $('input[name=pName]').val();

    if (numberIn < 1) {
        alert("Number must be greater than 0!");
    }
    else {

        alert("You have added " + numberIn + " stock to product: " + name);
    }

});

Answer 1

您不能在页面中重复 id，因此请改用类。

您希望从被点击的按钮遍历到与该按钮/项目关联的其他元素。在这种情况下，他们是兄弟姐妹

$(document).on('click', '.go-btn', function (event) {
    
    var $btn = $(this);
    var numberIn = $btn.siblings('input.input-stock').val();
    var name =  $btn.siblings('input.input-pname').val();

    if (numberIn < 1) {
        alert("Number must be greater than 0!");
    }
    else {
        alert("You have added " + numberIn + " stock to product: " + name);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <input type="hidden" name="id" class="input-id" value="code #1">
  <input type="hidden" name="pName" class="input-pname" value="item #1">
  <input type="number" name="stock" class="input-stock" value="3">
  <input type="button" value="Add Stock" class="btn btn-primary go-btn"  />
</p>

<p>
  <input type="hidden" name="id" class="input-id" value="code #2">
  <input type="hidden" name="pName" class="input-pname" value="item #2">
  <input type="number" name="stock" class="input-stock" value="7">
  <input type="button" value="Add Stock" class="btn btn-primary go-btn"  />
</p>