jQuery custom functions and passing parameters to them

Question

I have a row of images, and when one of the images is clicked it expands while also shrinking any other image that may be enlarged. If you click on the enlarged image, it just shrinks itself.

I'm receiving a 'shrink is not defined' error message. Thanks in advance.

        $.fn.grow = function(size,rate) {
            $(this).addClass('click').animate({'height': size}, rate);
        }
        $.fn.shrink = function(size,rate) {
            $('img').removeClass('click').animate({'height': size}, rate);
        }

        $(document).ready(function() {
            $('#gallery img').click(function() {
                var $this = $(this);
                ($this.hasClass('click')) ? $this.shrink('139', '200') : $this.shrink('139', '200').grow('700', '200');
            });
        });

Why do you declare: var $this = $(this); I'd say that confuzes JQuery cuz ur using the $ selector in a variable name. I am not 100% sure if that is allowed and if that is the cause. But try either just using $(this), or declare your variable differently.. like var me = $(this); — Jules
– Jules, Commented Jul 5, 2011 at 23:31
@Jules Variables with a leading $ are valid in JavaScript. — alex
– alex, Commented Jul 5, 2011 at 23:32
And actually preferred by many as an indicator that the variable is in fact a jQuery object. — Björn
– Björn, Commented Jul 5, 2011 at 23:34

alex · Accepted Answer · 2011-07-05 23:35:41Z

2

I received a different exception...

Uncaught TypeError: Cannot call method 'grow' of undefined

You are attempting to chain the methods (or use the cascade if you like Crockfordian terms), but neither of your custom functions returns a jQuery object.

You need to make them return something, generally this. In a jQuery custom function, this is already a jQuery object, so there is no need to wrap it again.

edited Jul 5, 2011 at 23:35

answered Jul 5, 2011 at 23:29

alex

492k205 gold badges890 silver badges992 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user113716 Over a year ago

+1, although for the shrink method, I think you'd want to return this so that the chaining continues on the original element. Here's an example.

user113716 Over a year ago

...also, the grow method can just do this.addClass('click'). No need to wrap it as in the question. (For OP's sake. I know you know that.) ;o)

kwicher · Accepted Answer · 2011-07-05 23:50:07Z

0

If you use $.fn.extend like that:

$.fn.extend({
    shrink: function() {$(this).doSth()},
    grow: function() {$(this).doSth()}
});

You will be able to apply your shrink and grow methods to any jQuery wrapped object eg

$('img').shrink();

Hope it helps

answered Jul 5, 2011 at 23:50

kwicher

2,0821 gold badge19 silver badges28 bronze badges

Collectives™ on Stack Overflow

jQuery custom functions and passing parameters to them

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related