Question

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

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

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

<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（如果可能，不希望使用锚标记）

第二个锚标记是我添加到购物车的链接。

<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

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

Answer 2

您通过使用

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

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

并且var quantity = $("#qty").val();只返回带有id="qty"

的第一个元素的值

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

手动创建文本框

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

然后在容器中包装文本框和“添加到购物车”链接，以便您可以使用相对选择器（不确定为什么将文本框包装在另一个<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在多个文本框之间指定

2 个答案: