jQuery 在多个文本框之间指定

Question

我正在为数据库中的多个项目制作购物车，但在添加文本框并添加 var quantity 之后，代码仅理解第一个文本框并为所有其他添加到购物车链接添加该数量。

如何告诉程序根据与之关联的项目查找特定的文本框，就像下面的行根据 'data-id'.

查找项目一样

我已经尝试使用 $(".qty-txt").children().value()，但我仍然不知道如何指定要查找的锚标记。

<script type="text/javascript">
        $(function () {
        $(".AddLink").click(function () {
            var quantity = $("#qty").val();
            var recordToAdd = $(this).attr("data-id");
            if (recordToAdd != '') {
                $.post("/ShoppingCart/AddToCart", { "id": recordToAdd, "qty": quantity },
                    function (data) {
                        $('#cart-status').text(data.CartCount);
                    });
                }
             });
        });
</script>

前 3 行是我在锚标记中的 Texbox（如果可能的话，最好不要使用锚标记）

第二个锚标签是我Link添加到购物车。

<a class="qty-txt" data-id="@item.ID">
@Html.TextBox("Quantity", 1, new { @class = "qty-input", @id = "qty", size = 1 })
</a>
<a href="#" class="AddLink" data-id="@item.ID" data-toggle="modal" data-target="#myModal">
      Add to cart
</a>

Answer 1

只需 select $(".qty-input") 即可获得所有匹配的输入。否则，您正在 select 包装器元素列表...如果您这样做，则需要在包装器对象的每个实例上使用循环进行导航。

Answer 2

您使用

包含重复的 id 属性生成了无效的 html

@Html.TextBox("Quantity", 1, new { @class = "qty-input", @id = "qty", size = 1 })

而var quantity = $("#qty").val();只会return具有id="qty"

的第一个元素的值

您需要使用 new { id = "", ...} 删除 id 属性或使用

手动创建文本框

<input type="text" class="qty-input" size = "1" value="1" />

然后将文本框和 "Add to cart" link 包裹在一个容器中，以便您可以使用相对选择器（不确定为什么要将文本框包裹在另一个 <a> 标记中？）

<div class="product">
  <input type="text" class="qty-input" size = "1" value="1" />
  <a href="#" class="AddLink" data-id="@item.ID" data-toggle="modal" data-target="#myModal">Add to cart</a>
</div>

修改脚本为

$('.AddLink').click(function () {
  var quantity = $(this).closest('.product').find('.qty-input').val();
  var recordToAdd = $(this).data('id'); // correct usage to access data- attributes

  if (recordToAdd != '') { // not sure why you need this (why would it ever be null?)
    $.post("/ShoppingCart/AddToCart", { "id": recordToAdd, "qty": quantity }, function (data) {
      $('#cart-status').text(data.CartCount);
    });
  }
});

jQuery 在多个文本框之间指定

jQuery specify between multiple textbox

javascript

jquery

html

asp.net-mvc-5

shopping-cart