Question

$(".box").each(function(){
    $(this).distance_left = function() {
        return $(this).offset().left - $(this).parent().offset().left;
    }
    $(this).distance_top = function() {
        return $(this).offset().top - $(this).parent().offset().top;
    }

});

当我在.box对象上调用distance_left或distance_top时，我只得到一个box.distance_left is not a function。为什么呢？

Answer 1

您需要扩展原型：

$.fn.distance_left = function() { return -1; };

然后你可以在所有jQuery对象上使用它：

$('#myId').distance_left(); // -1

无论如何，对于您的具体情况，您可以使用

$(this).position().left;
$(this).position().top;

Answer 2

因为每次创建jQuery包装器时都会返回一个新对象，所以即使将属性分配给包装器实例，它也不会在另一个实例中可用。

测试它的一种简单方法是比较$(this) == $(this)，它将返回false。

演示：Fiddle

这里的解决方案是使用下面给出的插件模型。

$.fn.distance_left = function () {
    return $(this).offset().left - $(this).parent().offset().left;
}
$.fn.distance_top = function () {
    return $(this).offset().top - $(this).parent().offset().top;
}

Answer 3

你可以做到

var that = $(this);

由于this在使用新函数更改范围时经常更改，因此您无法使用它来简单地访问原始值。将其别名为that，您仍然可以访问this的原始值。

所以你的代码将是

$(".box").each(function(){
    var that=$(this);
    that.distance_left = function() {
        return that.offset().left - that.parent().offset().left;
    }
    that.distance_top = function() {
        return that.offset().top - that.parent().offset().top;
    }

});

将函数添加到javascript / JQuery对象

3 个答案: