Как получить значения из скрытого поля, созданного в 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'] + ")");
      }
    });
  });
});