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

Question

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

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

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