Question

我是前端开发的新手，但有很多后端开发经验。我已尝试过以下javascript的几种不同方法，这只是我尝试过的一些方法。

我有以下显示产品的代码。对于我的产品列表中的每个循环，这是n。

在页面底部，我有添加按钮。

我需要获取每个产品的data-Id以获取productId，价格以获取价格和qty输入字段的值，以便我可以将其发送到我的购物车。

我无法获得这些价值，并尝试了一些不同的东西。

<div class="col-md-2">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">@Html.DisplayFor(modelItem => product.Code)</h3>
                </div>
                <div class="panel-body">
                    <div class="text-center" id="user_image">
                        <img src="../../images/chickenBreast.jpg" class="img-thumbnail" />
                    </div>
                    <br />
                    <div class="panel-body form-group-separated">
                        <div class="form-group">
                            <label class="control-label">Short Description:</label>
                            <p>@Html.DisplayFor(modelItem => product.Description)</p>
                        </div>
                        <div class="form-group">
                            <label class="control-label">Long Description:</label>
                            <p>@Html.DisplayFor(modelItem => product.LongDescription)</p>
                        </div>
                    </div>
                    <div class="panel-footer">
                        <form class="form-inline" role="form">
                            <div class="form-group">
                                <input id="qty" data-id="@product.Id" price="@product.Price" type="text" class="Product-control" placeholder="Qty" />
                            </div>
                            <button id="AddButton" class="btn btn-primary pull-right">Add to cart</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

这是我的javascript，我尝试了一些不同的东西，但似乎没有给我所需的数据

    <script type="text/javascript" src="../../Scripts/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $("#AddButton").click(function (form) {
        var productToUpdate = $("input").parent().find("data-id");
        var countToUpdate = $('input[id="qty"]', form).val();
        var productPrice = $(this).parent().find('price').val();

        if (productToUpdate != '') {
            // Perform the ajax post
            $.post("~/Cart/GetCartItems", { "productId": productToUpdate, "qty": countToUpdate, "price": productPrice },
            function (data) {
                //Check for not process the callback data when server error occurs
                //if (data.ItemCount != -1) {
                //    $('#cart-total').text(data.CartTotal);
                //}
            });
        }
    });
</script>

Answer 1

选择器data-id永远不会匹配。这表明data-id是一种元素类型，（例如）<data-id ...></data-id>尝试使用find('input[data-id]')代替。

https://api.jquery.com/category/selectors/attribute-selectors/

https://api.jquery.com/has-attribute-selector/

描述：选择具有指定属性的元素任何价值。

文档示例：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeHas demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div>no id</div>
<div id="hey">with id</div>
<div id="there">has an id</div>
<div>nope</div>

<script>
// Using .one() so the handler is executed at most once
// per element per event type
$( "div[id]" ).one( "click", function() {
  var idString = $( this ).text() + " = " + $( this ).attr( "id" );
  $( this ).text( idString );
});
</script>

</body>
</html>

// Using .one() so the handler is executed at most once
// per element per event type
$("div[id]").one("click", function() {
  var idString = $(this).text() + " = " + $(this).attr("id");
  $(this).text(idString);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>attributeHas demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>

  <div>no id</div>
  <div id="hey">with id</div>
  <div id="there">has an id</div>
  <div>nope</div>

  <script>
  </script>

</body>

</html>

Answer 2

我想出了层次结构

这是我的解决方案

HTML

<div class="panel-footer">
                        <form class="form-inline" role="form">
                            <div class="form-group">
                                <input id="qty" type="text" class="Product-control" placeholder="Qty" />
                            </div>
                            <button id="AddButton" data-id="@product.Id" price="@product.Price" class="btn btn-primary pull-right">Add to cart</button>
                        </form>
                    </div>

javascript

    <script type="text/javascript" src="../../Scripts/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $("#AddButton").click(function () {
        var productId = $(this).attr('data-id');
        var productPrice = $(this).attr('price');
        var qty = $(this).prev().children(".Product-control").val();

        if (productId != '') {
            // Perform the ajax post
            $.post("~/Cart/GetCartItems", { "productId": productId, "qty": qty, "price": productPrice },
            function (data) {
                //Check for not process the callback data when server error occurs
                //if (data.ItemCount != -1) {
                //    $('#cart-total').text(data.CartTotal);
                //}
            });
        }
    });
</script>

从页面HTML获取动态元素？

2 个答案: