jQueryを使用して製品名と画像を動的に取得する方法は？

Question

実際、jQueryを使用してカート機能に追加しています。買い物カゴに追加ボタンをクリックすると、商品名と画像が表示されます。私は静的に行うことができますが、すべての部門の製品名と画像を動的に取得する方法は私が欲しいものです。誰か助けてください。

これは私の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（）関数にこれを追加します1行目：

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)のように、この関数呼び出しを使用しています。