Javascript jQuery offset（）。顶部未定义

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>

哎,

我找到了一个关于如何为购物车部分中的项目创建飞行动画的教程，但现在我得到一个错误，告诉我offset.top未定义。我试图解决它，我认为这是因为它找不到图像，所以变量“imgtodrag”没有任何可拖动的内容

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

您需要使用而不是

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

---

因为

.item

不是

.add-to-cart2

的直接父项，

parent（）

只在DOM树上移动一个级别。因此，您需要使用

最近的（）

，它沿着DOM树向上移动，直到找到匹配项。

您可以找到

img

，而无需

parent（）

：

---

您确定

imgtodrag

不为空吗？您必须选择您的父母（）或最近的（）。parent（）只是一个级别，因此它引用元素。使用parents（）或closest（）可以解决您的问题。parents（）将是一个更为优化的解决方案，因为在这种情况下，您可以非常确定“this”并不是指项var imgtodrag=$（this）.nearest（'.item'）.find（“img”）.eq（0）；或者var imgtodrag=$（this）.parents（'.item'）.find（“img”）.eq（0）；parents（）比使用parents（）更好，imgtodrag为空，因此错误有效，非常感谢！有没有一个原因使它不适用于父对象？您必须选择您的父对象（）或最近的（）。parent（）只是一个级别，因此它引用元素。使用parents（）或closest（）可以解决您的问题。parents（）将是一个更为理想的解决方案，因为在这种情况下，您可以非常确定“this”并不是指项目。var imgtodrag=$（this）.最近（'.item'）.find（“img”）.eq（0）；或者var imgtodrag=$（this）.parents（'.item'）.find（“img”）.eq（0）；父母更好。由于您使用的是parent（），imgtodrag为null，因此会出现错误

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

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