Javascript 从页面HTML获取动态元素？_Javascript_C#_Jquery_Asp.net Mvc 4

Javascript 从页面HTML获取动态元素？

javascript c# jquery asp.net-mvc-4

Javascript 从页面HTML获取动态元素？,javascript,c#,jquery,asp.net-mvc-4,Javascript,C#,Jquery,Asp.net Mvc 4,我不熟悉前端开发，但有相当多的后端开发经验。我在下面尝试了几种不同的javascript方法，这只是我尝试过的一些方法我有下面显示产品的代码。这是我的产品列表中每个循环的n 在页面底部我有一个添加按钮我需要获取每个产品的数据Id以获取productId、price以获取价格和数量输入字段的值，以便将其发送到购物车我无法得到这些值，我尝试了一些不同的方法 <div class="col-md-2"> <div class="panel panel-p

我不熟悉前端开发，但有相当多的后端开发经验。我在下面尝试了几种不同的javascript方法，这只是我尝试过的一些方法

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

在页面底部我有一个添加按钮

我需要获取每个产品的数据Id以获取productId、price以获取价格和数量输入字段的值，以便将其发送到购物车

我无法得到这些值，我尝试了一些不同的方法

<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>


@DisplayFor（modelItem=>product.Code）


简要说明：
@DisplayFor（modelItem=>product.Description）
详细说明：
@DisplayFor（modelItem=>product.LongDescription）
添加到购物车

这是我的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>


$（“#添加按钮”）。单击（函数（表单）{
var productToUpdate=$（“输入”）.parent（）.find（“数据id”）；
var countToUpdate=$（'input[id=“qty”]”，form.val（）；
var productPrice=$（this.parent（）.find（'price'）.val（）；
如果（productToUpdate！=''）{
//执行ajax post
$.post（“~/Cart/GetCartItems”，{“productId”：productToUpdate，“qty”：countToUpdate，“price”：productPrice}，
功能（数据）{
//检查是否在发生服务器错误时不处理回调数据
//如果（data.ItemCount！=-1）{
//$（“#购物车总数”）.text（data.cartotal）；
//}
});
}
});

选择器

数据id

永远不会匹配。这表明

数据id

是一种元素类型，例如

尝试使用

find（'input[data id'））

描述：选择具有指定属性的元素，并使用任何价值

文档中的示例：

<!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>


属性作为演示
没有身份证
带身份证
他有身份证
不

我找到了层次结构

这是我的解决办法

HTML


添加到购物车

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>


$（“#添加按钮”）。单击（函数（）{
var productId=$（this.attr（'data-id'）；
var productPrice=$（this.attr（'price'）；
变量数量=$（this.prev（）.children（“.Product control”）.val（）；
如果（productId！=''）{
//执行ajax post
$.post（“~/Cart/GetCartItems”，{“productId”：productId，“数量”：数量，“价格”：productPrice}，
功能（数据）{
//检查是否在发生服务器错误时不处理回调数据
//如果（data.ItemCount！=-1）{
//$（“#购物车总数”）.text（data.cartotal）；
//}
});
}
});

.find（）

使用选择器。你的用法完全错误。阅读文档，阅读文章。有一个内置函数可以获取

数据-

属性。下面是一个关于如何将事件附加到动态创建的内容的相当流行的链接，尽管您没有附加事件，但很多逻辑非常有用，我认为适用于此：

    <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>