如何使用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)。