gpt4 book ai didi

javascript - 从页面 HTML 获取动态元素?

转载 作者:太空宇宙 更新时间:2023-11-03 15:41:57 24 4
gpt4 key购买 nike

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

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

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

我需要获取每个产品的数据 ID 以获取产品 ID,价格以获取价格和数量输入字段的值,以便我可以将其发送到我的购物车。

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

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

最佳答案

选择器 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/

Description: Selects elements that have the specified attribute, with any value.

文档中的示例:

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

关于javascript - 从页面 HTML 获取动态元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29946073/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com