如何使用jQuery动态获取产品名称和图像？

Actually I am doing add to cart functionality using jQuery. On click of add to cart button product name and image should come. Statically I can do but how to get the product name and image dynamically for all divs is what I want. Please somebody help with this.

实际上我正在使用jQuery添加到购物车功能。点击添加到购物车按钮产品名称和图像应该来。静态地我可以做但是如何为所有div动态获取产品名称和图像是我想要的。请有人帮忙解决这个问题。

This is my HTML markup:

这是我的HTML标记:

<div class="col-sm-4">
    <div class="prdtitem" id="anaconda">
        <div class="cartBg">
            <a href="#cart" onclick="addToCart()">
                <div class="enqry-cart pull-left">
                    <i class="fa fa-shopping-cart pull-left" aria-hidden="true"></i>
                    <span class="pull-left">add to enquiry cart</span>
                </div>
            </a>
        </div>
        <img src="images/barcunda-black.jpg" class="lazy-loaded"/>
        <h4>Barcunda Black</h4>
    </div>
</div>
<div class="col-sm-4">
    <div class="prdtitem" id="anaconda">
        <div class="cartBg">
            <a href="#cart">
                <div class="enqry-cart pull-left">
                    <i class="fa fa-shopping-cart pull-left" aria-hidden="true"></i>
                    <span class="pull-left">add to enquiry cart</span>
                </div>
            </a>
        </div>
        <img src="images/bruno-white.jpg" class="lazy-loaded"/>
        <h4>Bruno White</h4>
    </div>
</div>
<div class="col-sm-4">
    <div class="prdtitem" id="anaconda">
        <div class="cartBg">
            <a href="#cart" onclick="addToCart()">
                <div class="enqry-cart pull-left">
                    <i class="fa fa-shopping-cart pull-left" aria-hidden="true"></i>
                    <span class="pull-left">add to enquiry cart</span>
                </div>
            </a>
        </div>
        <img src="images/fantasy-brown.jpg" class="lazy-loaded"/>
        <h4>Fantasy Brown</h4>
    </div>
</div>
<div class="col-sm-4">
    <div class="prdtitem" id="anaconda">
        <div class="cartBg">
            <a href="#cart" onclick="addToCart()">
                <div class="enqry-cart pull-left">
                    <i class="fa fa-shopping-cart pull-left" aria-hidden="true"></i>
                    <span class="pull-left">add to enquiry cart</span>
                </div>
            </a>
        </div>
        <img src="images/iceberg.jpg" class="lazy-loaded"/>
        <h4>Iceberg</h4>
    </div>
</div>
<div class="col-sm-4">
    <div class="prdtitem" id="anaconda">
        <div class="cartBg">
            <a href="#cart" onclick="addToCart()">
                <div class="enqry-cart pull-left">
                    <i class="fa fa-shopping-cart pull-left" aria-hidden="true"></i>
                    <span class="pull-left">add to enquiry cart</span>
                </div>
            </a>
        </div>
        <img src="images/mercury-white.jpg" class="lazy-loaded"/>
        <h4>Mercury White</h4>
    </div>
</div>

And here my jQuery code:

在这里我的jQuery代码:

$(document).ready(function(){
    //alert("coming");
    var cart = [];
        $(function () {
            if (localStorage.cart) {
                cart = JSON.parse(localStorage.cart);
                // console.log(cart);
                showCart();
            }
    });
});

        function addToCart() {
            how to get product name and image here for all divs?
            // alert(price);alert(name);alert(qty);return false;
            // update qty if product is already present
            for (var i in cart) {
                if(cart[i].Product == name) {
                    cart[i].Qty = qty;
                    showCart();
                    saveCart();
                    return;
                }
            }
            // create JavaScript Object
            var item = { Product: name,  Price: price, Qty: qty };
            //console.log(item);return false;
            // alert(item);return false; 
            cart.push(item);
            console.log(cart);return false;
            saveCart();
            showCart();
        }

        function deleteItem(index){
            //alert(index);return false;
            cart.splice(index,1); // delete item at index
            showCart();
            saveCart();
        }

        function saveCart() {
            if ( window.localStorage) {
                localStorage.cart = JSON.stringify(cart);
            }
        }

4 个解决方案

#1

Add this to your addToCart() function on the first line:

将其添加到第一行的addToCart()函数中:

var $parent = $(this).parents('.prdtitem');

var productName = $parent.find('h4').text();
var productImage = $parent.find('img').attr('src');

UPDATE

function addToCart(elem){

    var $parent = $(elem).parents('.prdtitem');

    var productName = $parent.find('h4').text();
    var productImage = $parent.find('img').attr('src');

    // then the rest of your existing code

}

#2

I see a very little jQuery involved in your addToCart function. You could simply refer it's parent container to get the source attribute of the image and the product title text:

我看到你的addToCart函数中涉及的jQuery很少。您可以简单地引用它的父容器来获取图像的源属性和产品标题文本:

First of all, change the way button is clicked, instead of using inline function, you could add a class reference on it, and fire the addToCart button as callback:

首先,更改单击按钮的方式,而不是使用内联函数,您可以在其上添加类引用,并激活addToCart按钮作为回调:

<a href="javascript:;" class="btn-add">...</a>

$('.btn-add').on('click', addToCart);

function addToCart() {
  var container = $(this).parents('.prdtitem');
  var thumbnailImage = container.find('img.lazy-loaded').attr('src');
  var productTitle = container.find('h4').text();
  // ... rest of your code
}

Now you got the image source within the thumbnailImage variable and the title in the productTitle.

现在,您获得了thumbnailImage变量中的图像源和productTitle中的标题。

#3

Create a click event:

创建一个点击事件:

$('.cartBg a').click(function(){
   var img = $(this).closet('.cartBg').find('img').attr('src');
   var title = $(this).closet('.cartBg').find('h4').text();
   addToCart();
   alert(title);
});

#4

You can use your function like this -

你可以像这样使用你的功能 -

JAVASCRIPT

function addToCart(obj){
    var product_name = $(obj).closest('.prdtitem').find('h4').text();
    var image_src = $(obj).closest('.prdtitem').find('img.lazy-loaded').attr('src');
    alert(product_name,image_src);
}

In element you use this function call like this onclick=addToCart(this).

在元素中,您可以像这样使用此函数调用onclick = addToCart(this)。

#1