javascript - 无法读取未定义 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 不是直接 parent ，而是“祖父”。使用 closest，您将获得最接近的上升元素，这就是本例中您想要的元素。试试这个:

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