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调用之外声明一个变量。 {1}}然后返回，就像他在答案中提到的Rocket一样。

Answer 4

通过设计，您的插件可以采用多个元素。这就是你迭代this。

的原因

如果传入多个对象，有些空白，有些不是？要么将插件编码为仅使用一个对象，要么考虑更改插件如何通知您画布的状态。您可以将类添加到空白元素或数据标记，而不是返回false。

上述答案中的方法可行，但如果您使用它们，我建议您将插件名称更改为“AreAllBlank（）”

从jQuery插件返回true或false

4 个答案: