javascript - 如何使用Jquery在单击按钮时页面上的许多div中以div中的表单获取数据

Question

我在 div 中显示来自数据库的数据。显示的 div 数量取决于数据库记录。每个 div 都有一个包含隐藏输入和提交按钮的表单。当我单击提交按钮时，我应该只从该 div 的隐藏输入中获取数据。问题是我只从第一个 div 获取数据。

html

<div class="col-md-4 col-sm-4" th:each="product : ${products}">
        <!--card -->
        <div class="card" style="margin-bottom: 10px;">
            <span th:if="${products.empty}" style="color: #0e4377">No Products Available</span>
            <!-- Card image -->
            <div class="view overlay">
                <img class="card-img-top"  alt="productImage" th:attr="src=${product.image}" height="100px" width="50px" >
            </div>
            <!-- Card image -->

            <div class="card-body" >
                <!-- Title -->
                <h4 class="card-title" th:text="${product.name}"></h4>
                <!-- Text -->
                <span>
                    <i class="fas fa-dollar-sign"></i>
                    <p class="card-text" th:text="${product.price}">$</p>
                </span>

                <!--button container-->
                <div class="button-container" >
                    <!-- Button -->
                <form  action="#" th:object="${Product}" method="POST" >
                    <input type="hidden" th:value="${product.id}" name="id" class="id"/>
                    <input type="hidden" th:value="${product.name}" name="name" class="name"/>
                    <input type="hidden" th:value="${product.image}" name="image" class="image"/>
                    <input type="hidden" th:value="${product.price}" name="price" class="price"/>
                    <input type="hidden"  th:value="${session.userId}" name="userId" class="userId"/>
                <button type="submit" class="btn btn-info btn-sm" onclick="addToCart();">Add</button>
                </form>

                </div>
                <!--button container-->
            </div>

        </div>
    </div>

js

<script>

    function addToCart() {
      var id = $(".id").val();
      var name = $(".name").val();
      var price = $(".price").val();
      var userId = $(".userId").val();

      var select = {
          id: id,
          name: name,
          price:price,
          userId:userId
      };

      alert(select.price);
    }

</script>

Answer 1

尝试传递关键字this

<button type="submit" class="btn btn-info btn-sm" onclick="addToCart(this);">Add</button>

和

function addToCart(this){
    var id = $(this).siblings(".id").val();