Question

Bellow是一个jQuery函数的例子，它在某个事件之后调用回调函数......

(function($) {
    $.fn.extend({
        myCustomFunction : function(callback) {
            var element = $(this[0]);

            $(document).mouseup(function(e) {
                callback(e);
            });

        }
    });
})(jQuery);

到目前为止，没有问题..

但是当我使用myCustomFunction

时

$('#test').myCustomFunction(function() {
    $(this).fadeOut(250, function() {
        $(this).remove();
    });
});

$(this)不会返回$('#test')。为什么？我该如何解决这个问题？

Answer 1

嘿，看起来你在这里过分复杂了。您可以通过以下方式简化：

$('#test').mouseup(function () {
    $(this).fadeOut(250, function () {
        $(this).remove();
    });
});

如果你真的想用函数扩展jQuery，你可以这样做：

$.fn.extend({
    myCustomFunction: function () {
        $(this).mouseup(function () {
            $(this).fadeOut(250, function () {
                $(this).remove();
            });
        });
    }
});

$('#test').myCustomFunction();

Answer 2

好的，我终于找到了如何实现这个目标..

我没有像callback()那样直接调用回调函数，而是尝试使用call callback.call()调用它并使用它传递元素。

(function($) {
    $.fn.extend({
        myCustomFunction : function(callback) {
            var element = $(this[0]);

            $(document).mouseup(function(e) {
                callback.call(element[0], e);
            });

        }
    });
})(jQuery);

然后在回调函数中使用this将引用所选元素

$('#test').myCustomFunction(function() {
    $(this).fadeOut(250, function() {
        $(this).remove();
    });
});

使用自定义jQuery函数时传递选择器

2 个答案: