Возвращение true или false из плагина jQuery

Question

Я пытаюсь написать простой плагин jQuery, чтобы проверить, пустой холст или нет.Однако у меня возникают проблемы с возвратом логического значения.

(function ($) {
    $.fn.extend({ 
        isBlank : function() {
            return this.each(function () {
                var context = this.getContext('2d'),
                    imageData = context.getImageData(0, 0, this.offsetWidth, this.offsetHeight);

                for (var i = 0; i < imageData.data.length; i += 4) {
                    if (imageData.data[i+3] !== 0) {
                        return false;
                    }
                }

                return true;
            });
        }
    });
})(jQuery);

По некоторым причинам это возвращает объект canvas, а не логическое значение.Однако когда я вынимаю код из цикла each, он возвращает логическое значение, как и ожидалось.

Как мне заставить его работать с циклом each?

Answer 1

Возвращает холст, потому что это то, что возвращается из функции isBlank. return this.each(...) возвращает объект jQuery, isBlank был вызван.

Вам необходимо установить переменную перед .each, установить ее в значение true или false, если необходимо, а затем вернуть ее вместо.

Примечание. Внутри .each, return false функции, такие как break и return true, функции, такие как continue.

.

Пример:

(function ($) {
    $.fn.extend({ 
        isBlank : function() {
            var ret = true;
            this.each(function () {
                var context = this.getContext('2d'),
                    imageData = context.getImageData(0, 0, this.offsetWidth, this.offsetHeight);

                for (var i = 0; i < imageData.data.length; i += 4) {
                    if (imageData.data[i+3] !== 0) {
                        ret = false;
                    }
                }
            });
            return ret;
        }
    });
})(jQuery);

Answer 2

(function ($) {
    $.fn.extend({ 
        isBlank : function() {
            var result = true;
            this.each(function () {
                var context = this.getContext('2d'),
                    imageData = context.getImageData(0, 0, this.offsetWidth, this.offsetHeight);

                for (var i = 0; i < imageData.data.length; i += 4) {
                    if (imageData.data[i+3] !== 0) {
                        result = false;
                    }
                }
            });
            return result;
        }
    });
})(jQuery);

По сути, извлеките лишние операторы return и верните одно значение в конце функции.

Answer 3

Ваш код вызывает возврат на this.each, который должен возвращать объект, для которого вы вызываете .isBlank.Я бы удалил возврат по каждому и посмотрел бы, происходит ли ожидаемое вами поведение через , и объявил бы переменную вне вызова .each, которая устанавливается .each и возвращается вместо этого, какРакета упоминается в его ответе.

Answer 4

По своему дизайну ваш плагин может принимать несколько элементов.Вот почему вы перебираете this.

Что если вы передадите несколько объектов, некоторые пустые, некоторые нет?Либо закодируйте плагин, чтобы он брал только один объект, либо рассмотрите возможность изменения того, как ваш плагин информирует вас о состоянии холста.вместо возврата false вы можете добавить класс к пустым элементам или тег данных.

Методы в приведенных выше ответах будут работать, но если вы используете их, я бы предложил изменить имя плагина на "AreAllBlank ()"