定義されていないjQueryのプロパティ 'top'を読み取ることができません

Question

このスクリプトが動作するようにコードを修正する手助けがありますか？

これは私のhtmlです：

 <div class="img-wrapper item"> 
      <a href="/product/{{$product->id}}/{{$product->slug}}"> 
       <a class="thumbnail" href="/product/{{$product->id}}/{{$product->slug}}" style="margin-bottom: 0px; border: none;"> 
       <img class="media-object indexImg" src="{{$product->image}}"> 
       </a> 
      </a> 
      <div class="tags"> 
      @if($product->discount > 0) 
       <span class="label-tags"><span class="label label-danger">Išpardavimas</span></span> 
      @endif  
       <span class="label-tags"><span class="label label-info">Nauja</span></span> 
      </div> 
      <div class="option"> 
       <button class="add-to-cart" type="button">Add to cart</button> 
      </div> 
     </div> 

これはスクリプトです：

$('.add-to-cart').on('click', function() { 
     var cart = $('.shopping-cart'); 
     var imgtodrag = $(this).parent('.img-wrapper').find("img").eq(0); 
     if (imgtodrag) { 
      var imgclone = imgtodrag.clone() 
       .offset({ 
       top: imgtodrag.offset().top, 
       left: imgtodrag.offset().left 
      }) 
       .css({ 
       'opacity': '0.5', 
        'position': 'absolute', 
        'height': '150px', 
        'width': '150px', 
        'z-index': '100' 
      }) 
       .appendTo($('body')) 
       .animate({ 
       'top': cart.offset().top + 10, 
        'left': cart.offset().left + 10, 
        'width': 75, 
        'height': 75 
      }, 1000, 'easeInOutExpo'); 
    }); 

スクリプトが良いですので、それは一例で動作します。私はこのラインを埋める正しく必要があります。

var imgtodrag = $(this).parent('.img-wrapper').find("img").eq(0); 

Answer 1

.img-wrapperが直接の親が、「祖父」ではありませんので、あなたの問題があります。 closestを指定すると、最も近い祖先が得られます。これは、この場合に必要な要素です。これを試してください：

var imgtodrag = $(this).closest('.img-wrapper').find("img").first();