j查询在多个文本框之间指定

jQuery specify between multiple textbox

本文关键字：之间 文本 查询      更新时间：2023-09-26

我正在为数据库中的多个项目制作购物车，但是在添加文本框并添加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>

通过使用包含重复的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);
    });
  }
});

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

相关文章：