Question

的jQuery

$('.add-to-cart2').on('click', function () {
    var cart = $('.cart');
    var imgtodrag = $(this).parent('.item').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');

        setTimeout(function () {
            cart.effect("shake", {
                times: 2
            }, 200);
        }, 1500);

        imgclone.animate({
            'width': 0,
                'height': 0
        }, function () {
            $(this).detach()
        });
    }
});

HTML

<li>
    <div class="polaroid item">
        <p>
             <button class="add-to-cart2" type="button">
                   Add to cart
             </button>
        </p>
        <img src="/img/rawr.png" alt="item">
    </div>
</li>

错误

Uncaught TypeError: Cannot read property 'top' of undefined

嗨，

我找到了一个关于如何在购物车部分创建项目的动画动画的教程，但是此刻我收到一个错误，告诉我offset.top是未定义的。我试图解决它并且发生这种情况的原因我认为它无法找到图像所以变量“imgtodrag”没有任何可拖动的东西。

如果有人能在代码中看到错误，我会很高兴！：）

Answer 1

您需要使用 closest() 代替 parent()

var imgtodrag = $(this).closest('.item').find("img").eq(0);

由于.item不是.add-to-cart2的直接父级，因此parent()仅在DOM树中向上移动一级。因此，您需要使用closest()，它会在DOM树中向上移动，直到找到匹配为止。

Answer 2

您可以在没有img的情况下找到parent()：

var imgtodrag = $(".add-to-cart2").find("img").eq(0);

jQuery offset（）。top未定义

2 个答案: