無法讀取未定義jQuery的屬性「頂部」

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