如何使用 jQuery 從動態生成的內容的每個 div 中獲取屬性值？

Question

我正在嘗試使用 jQuery、ajax 將產品添加到購物車。 但問題是當我使用下面列出的代碼時，它只返回第一個 div 的產品 ID。 我的產品是從數據庫中動態獲取的。 單擊添加到購物車底部時，我需要每個 div 的產品 ID。

如何在單擊<p class="btn-icon" value="<%= products[i].id %>" id="value" style="cursor: pointer;">時獲取每個 div 的 productid？

Jquery代碼

<script>
        $(document).ready(function() {
            $('#value').on('click', function(){
                alert($(this).attr('value'))
            })
        })
    </script>

產品.ejs

                                <% for( let i = 0; i<products.length; i++) { %>
                                    <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 product-item">
                                        <div class="pd-bd product-inner">
                                            <div class="product-img">
                                                <a href="#"><img src="../<%= products[i].image[0] %>" alt="" class="img-reponsive"></a>
                                                <div class="ribbon-price red"><span id="discount"><%= products[i].discount %>%</span></div>
                                            </div>
                                            <div class="product-info">
                                                <div class="color-group"></div>
                                                <div class="element-list element-list-left">
                                                    <ul class="desc-list">
                                                        <%- products[i].description %>
                                                    </ul>
                                                </div>
                                                <div class="element-list element-list-middle">
                                                    <div class="product-rating bd-rating">
                                                        <span class="star star-5"></span>
                                                        <span class="star star-4"></span>
                                                        <span class="star star-3"></span>
                                                        <span class="star star-2"></span>
                                                        <span class="star star-1"></span>
                                                        <div class="number-rating">( 896 reviews )</div>
                                                    </div>
                                                    <p class="product-cate"><%= products[i].category[0].category %></p>
                                                    <h3 class="product-title"><a href="#"><%= products[i].title %></a></h3>
                                                    <% if(products[i].discount != 0) { %>
                                                    <% let orginalPrice =  products[i].price %>
                                                    <% let discount =  products[i].discount %>
                                                    <% let newPrice =  orginalPrice - (orginalPrice/100)*discount %>
                                                    <% console.log(newPrice) %>
                                                    <div class="product-bottom">
                                                        <div class="product-price">
                                                            <span class="red" id="new">Rs. <%= newPrice %></span>
                                                            <span class="old" id="old">Rs. <%= products[i].price %></span>
                                                        </div>
                                                        <a href="#" class="btn-icon btn-view">
                                                            <span class="icon-bg icon-view"></span>
                                                        </a>
                                                    </div>
                                                    <% } else { %>
                                                    <div class="product-bottom">
                                                        <div class="product-price"><span>Rs. <%= products[i].price %> </span></div>
                                                        <a href="#" class="btn-icon btn-view">
                                                            <span class="icon-bg icon-view"></span>
                                                        </a>
                                                    </div> 
                                                    <% } %>
                                                    <!-- <div class="product-bottom-group">
                                                        <button class="btn-icon" id="add-to-cart">
                                                            <span class="icon-bg icon-cart" id="add-to-cart"></span>
                                                        </button>
                                                        <a href="#" class="btn-icon">
                                                            <span class="icon-bg icon-wishlist"></span>
                                                        </a>
                                                        <a href="#" class="btn-icon">
                                                            <span class="icon-bg icon-compare"></span>
                                                        </a>
                                                    </div> -->
                                                    <div class="product-button-group">
                                                        <p class="btn-icon" value="<%= products[i].id %>" id="value" style="cursor: pointer;">
                                                            <span class="icon-bg icon-cart"></span>
                                                        </p>
                                                        <p href="#" class="btn-icon" style="cursor: pointer;">
                                                            <span class="icon-bg icon-wishlist"></span>
                                                        </p>
                                                        <p href="#" class="btn-icon" style="cursor: pointer;">
                                                            <span class="icon-bg icon-compare"></span>
                                                        </p>
                                                    </div>
                                                </div>          
                                                
                                            </div>
                                        </div>
                                    </div>
                                <% } %>

Answer 1

不要使用動態 ID，而是使用 class 名稱。

<script>
    $(document).ready(function() {
        $('.btn-icon[value]').on('click', function(){
            alert($(this).attr('value'))
        })
    })
</script>

.btn-icon[value]選擇器返回具有value屬性的 class btn-icon的所有元素。

Answer 2

不需要身份證。 只需使用正確的選擇器來識別每個.product-button-group div 中的第一個<p>標記：

$('.product-button-group > p:first-child').on('click', function(){
  alert($(this).attr('value'))
})