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

Question

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

这是我的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> 

而且这里我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); 
      } 
     } 

Answer 1

添加到您的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 

} 

Answer 2

创建点击事件：

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

Answer 3

我看到涉及您的addToCart函数一个很小的jQuery。您可以简单地引用其父容器以获取图像的源属性和产品标题文本：

首先，更改单击按钮的方式，而不是使用内联函数，您可以在其上添加一个类引用和火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 
 
}

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

Answer 4

您可以使用函数这样的 -

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

在元素您使用此函数调用这样onclick=addToCart(this)。