如何从在forEach中创建的具有不同值的隐藏字段中获取值?

时间:2018-10-26 10:23:32

标签: javascript jquery ajax

我最近一直在使用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'] + ")");
      }
    });
  });

我在实现中得到未定义的值

1 个答案:

答案 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'] + ")");
      }
    });
  });
});