Блог

Я пытаюсь добавить товар в корзину с помощью jQuery, ajax. Но проблема в том, что когда я использую приведенный ниже код, он возвращает только идентификатор продукта первого div. Мои продукты динамически извлекаются из базы данных. Мне нужен идентификатор продукта каждого div при нажатии на кнопку «Добавить в корзину» внизу.

Как я могу получить идентификатор продукта каждого div при нажатии <p class="btn-icon" value="<%= products[i].id %>" id="value" style="cursor: pointer;"> ?

Код 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>
                                <% } %>
 

Вместо использования динамического идентификатора используйте имя класса.

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

.btn-icon[value] Селектор возвращает все элементы с классом btn-icon , которые имеют value атрибут.

Нет необходимости в удостоверении личности. Просто используйте правильный селектор, чтобы определить первый <p> тег в каждом из .product-button-group дивов:

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