javascript - Returning true or false from a jQuery plugin - Stack Overflow

admin管理员组

文章数量:1418637

I'm trying to write a simple jQuery plugin to test whether a canvas is blank or not. However, I am having trouble returning a boolean.

(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);

For some reason, this returns the canvas object, and not the boolean. When I take my code out of the each loop, however, it returns the boolean as expected.

How can I get this to work with the each loop?

I'm trying to write a simple jQuery plugin to test whether a canvas is blank or not. However, I am having trouble returning a boolean.

(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);

For some reason, this returns the canvas object, and not the boolean. When I take my code out of the each loop, however, it returns the boolean as expected.

How can I get this to work with the each loop?

• javascript
• jquery
• plugins
• each

Share Improve this question Follow asked Dec 6, 2011 at 22:49 user1082754user1082754 2

• You can't return a this.each, cause it return the own element. You need make a new variable and set it false, for instance, run the this.each without return, set this variable to a new value, that will be returned, and return the variable content. – David Rodrigues Commented Dec 6, 2011 at 22:52
• @DavidRodrigues Could you provide an example? I'm struggling to visualise what you're saying. – user1082754 Commented Dec 6, 2011 at 22:59

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

It's returning the canvas because that's what's being returned from the function isBlank. return this.each(...) returns the jQuery object isBlank was called on.

You need to set a variable before the .each, set it to true or false when needed, and then return that instead.

Note: Inside .each, return false functions like break and return true functions like continue.

Example:

(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);

(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);

Basically, pull out the superfluous return statements, and return one value at the end of the function.

Your code is calling a return on this.each, which should return the object you're calling .isBlank on. I'd remove the return on the each and see if the behavior you're expecting es through and declare a variable outside of the .each call that is set by the .each and returned instead, like Rocket mentioned in his answer.

By design here your plugin is able to take multiple elements. That's why you iterate over this.

What if you pass in multiple objects, some blank, some not? Either code the plugin to take only one object or consider changing how your plugin informs you of the status of the canvas. instead of returning false you could add a class to elements that are blank, or a data tag.

The methods in the above answers will work, but if you use them I'd suggest changing the plugin name to "AreAllBlank()"

本文标签： javascriptReturning true or false from a jQuery pluginStack Overflow