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();

Answer 2

我做了很多搜索，并找到了完美的解决方案。

 var items;
$(document).on('click', '.btn-info', function(e) {
    e.preventDefault();
    items ={
        name: $(this).closest('.button-container').find('.name').val()
    };
    alert(items.name);
})

如何使用Jquery在按钮单击页面上的多个div中的div中以div的形式获取数据

2 个答案: