我最近一直在使用jquery。我需要从通过forEach创建的隐藏字段中删除参数,即在class =“ productID”下,值是不同的。如何单击按钮以仅从所需的隐藏字段中获取值。
<div id="successAdded" style="color: green">
<h3>${sessionScope.successAdded}</h3>
</div>
<c:forEach items="${sessionScope.allProducts}" var="products">
<div class="col-md-4 fashion-grid">
<a href="single.jsp"><img src="images/product/${products.imageName}" width="250" height="350" alt="" />
<div class="product">
<h3>PRODUCT NAME:</h3>
<input type="hidden" class="productID" value="${products.id}">
<span class="getName">${products.name}</span>
<p>${products.size}</p>
<p>${products.color}</p>
<p>${products.category.name}</p>
<p>${products.manufacturer.name}</p><br></br>
<p><span></span>${products.price}</p>
</div>
</a>
<div class="fashion-view"><span></span>
<div class="clearfix"></div>
<input type="button" class="addProductToCart" style="margin-top: 50%;" value="Add to cart" />
</div>
</div>
jQuery(document).ready(function() {
$('.addProductToCart').on('click', function getPage() {
var id = $(this).find('.productID').val();
alert(id);
$.ajax({
type: "GET",
url: "cart",
data: "productID=" + id,
success: function(page) {
$("#header men").text(page);
$("#productCount").text("(" + page['productCount'] + ")");
}
});
});
我在实现中得到未定义的值
答案 0 :(得分:1)
您在这里有两个问题。首先,隐藏元素上有一个class
,因此您需要在选择器前面加上.
作为前缀。 .productID
。
第二,您正在使用单击按钮中的find()
来查找隐藏字段,但这不是此元素的子元素。相反,它是父母同级的孩子。因此,您需要组合closest()
,prev()
和find()
来检索它,如下所示:
jQuery(document).ready(function() {
$('.addProductToCart').on('click', function getPage() {
var id = $(this).closest('.fashion-view').prev('a').find('.productID').val();
console.log(id);
$.ajax({
type: "GET",
url: "cart",
data: { productID: id },
success: function(page) {
$("#header men").text(page);
$("#productCount").text("(" + page['productCount'] + ")");
}
});
});
});