Блог

Главная - Вопросы по программированию - Передача селектора при использовании пользовательских функций jQuery

Передача селектора при использовании пользовательских функций jQuery

#jquery

#jquery

Вопрос:

Ниже приведен пример функции 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') . Почему? И как я могу это решить?

Ответ №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();

Комментарии:

1. Приведенный выше пример был лишь примером того, чего я пытался достичь.. Независимо от того, что может делать функция.. возможно ли сделать то, что я задал в вопросе?

2. Если ваш вопрос заключается в том, возможно ли это, посмотрите выше, поскольку я предложил два решения. Если ваш вопрос касается this использования, ответ заключается в том, что вы не можете выбрать $('#test') с $(this) помощью вложения обратного вызова в $(document) селектор.

3. Да, мой вопрос о this том. Итак, вашим последним утверждением вы имеете в виду, что это невозможно? Как jQuery может достичь этого в .each() функции? Похоже, что они могут изменять значение this !

4. this используется для ссылки на элемент в текущей области. Если вы хотите сослаться this на родительскую область, вы можете использовать переменную или прокси. Я обычно делаю var self = this; это при вложении, чтобы я мог получить доступ к исходному объекту через $(self) .

5. не могли бы вы, пожалуйста, взглянуть на мой ответ и сказать мне, эффективно ли использовать этот метод. Заранее благодарю вас.

Ответ №2:

Хорошо, я наконец нашел, как этого добиться..

Вместо того, чтобы вызывать функцию обратного вызова напрямую, как это callback() , я попытался вызвать ее с помощью вызова 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();
    });
});
Метки: