jQuery - creating a jQuery function

Question

I'm sorry for the general title, but I don't realy know how to call it.

Here is my code, that I want to reduce:

    $('.ShowDialogIcon').click(function() {
        $('.show_dialog').slideDown('fast');
        return false;
    });

    $('.ShowDialogIcon2').click(function() {
        $('.show_dialog2').slideDown('fast');
        return false;
    });

    $('.ShowDialogIcon3').click(function() {
        $('.show_dialog3').slideDown('fast');
        return false;
    });

    $('.ShowDialogIcon4').click(function() {
        $('.show_dialog4').slideDown('fast');
        return false;
    });

Now I see, that this is a bit unefective, what I would like to do is:

$('.ShowDialogIcon').showDialog('.showDialog');
$('.ShowDialogIcon2').showDialog('.showDialog2');
$('.ShowDialogIcon4').showDialog('.showDialog3');
$('.ShowDialogIcon4').showDialog('.showDialog4');

And what I've come up with is:

jQuery.fn.showDialog = function(cls) {
    $(this).click(function() {
        $(cls).show('fast');
    });
}

And it doesn't work, can anyone help please?

Thanks, Mike.

In what way doesn't it work? What do you see? What errors are reported? — lonesomeday
– lonesomeday, Commented Jan 11, 2011 at 18:05
You're using two different classes in your examples. .show_dialog2 in the current code and .showDialog2 in the desired code. Intentional? — Stephen
– Stephen, Commented Jan 11, 2011 at 18:07

Robert Koritnik · Accepted Answer · 2011-01-11 18:25:00Z

5

You're setting click event on the wrong element.

The correct jQuery plugin

This is an equivalent to your functionality:

jQuery.fn.extend({
    showDialog: function(cls) {
        this.click(function(evt){
            evt.preventDefault();
            $(cls).slideDown("fast");
        });
    }
});

To stop event bubbling it's better to use preventDefault function on the event itself than returning false. This way you can safely avoid browsers' particularities.

edited Jan 11, 2011 at 18:25

answered Jan 11, 2011 at 18:04

Robert Koritnik

105k57 gold badges286 silver badges415 bronze badges

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

9 Comments

lonesomeday Over a year ago

You're setting jQuery.fn.extend to an object, rather than calling it on the object...

Robert Koritnik Over a year ago

@sberry2A: Thanks. My thoughts exactly. ;)

lonesomeday Over a year ago

Apart from the performance benefit of this vs $(this), this should be equivalent to the code above, so this probably isn't the solution, but it's much nicer code!

Mike Over a year ago

This one looks good, but when I use it like: $('.ShowDialogIcon').showDialog('.showDialog'); It stops the link, but nothing slides down =/

lonesomeday Over a year ago

@Mike See Stephen's comment above.

|

Andrew Whitaker · Accepted Answer · 2011-01-11 18:07:39Z

0

If you want to set up a jQuery plugin to do this:

(function($) {
    $.fn.showDialog = function(cls) {
        this.click(function() {
            $(cls).show('fast');
            return false;
        });
    });
})(jQuery);

$("#foo").showDialog(".bar");

See here for how to author a plugin.

answered Jan 11, 2011 at 18:07

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

1 Comment

Andrew Whitaker Over a year ago

@Robert: Good point, but easier to do it now in case I decide to add some private variables later.

amosrivera · Accepted Answer · 2011-01-11 18:11:01Z

0

My usual approach to this situation is first give a class that all dialog icons share and add an attribute to the dialog icon that points to the dialog that you want to show. For instance:

<a href="#show_dialog1" class="ShowDialogIcon">Show first</a> //href points to the dialog that will slide
<a href="#show_dialog2" class="ShowDialogIcon">Show first</a>  

$(".ShowDialogIcon").click(function(){
    //use the href attribute
    var dialog = $(this).attr("href").replace("#",".");  
    $(dialog).slideDown("fast");  //slidedown
    return false; 
});

answered Jan 11, 2011 at 18:11

amosrivera

26.6k9 gold badges70 silver badges76 bronze badges

1 Comment

amosrivera Over a year ago

i'm guessing you don't like that much then.

Collectives™ on Stack Overflow

jQuery - creating a jQuery function

3 Answers 3

The correct jQuery plugin

9 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

The correct jQuery plugin

9 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related