sending parameters to a jquery function

Question

I have the following function which works very well within a $(document).ready(function(){

$('.threadWrapper > .littleme').click(function() {
        $(this).next().toggle();
        $(this).toggle();
        $('.littleme').not(this).next().hide();
        $('.littleme').not(this).show();

        // re-run masonry
        $('#mainContent').masonry();

        return false;
    }).next().hide();

What I want to be able to do is call this from inline javascript Each div element that contains the threadWrapper class also has its own id. What I want to do is to be able to trigger this function using inline javascript calls and sending an id as a parameter. For example:

$(function(id){
$('#id > .littleme').next().toggle();
$('#id > .littleme').toggle();
etc. etc.
});

Nick Craver · Accepted Answer · 2010-03-11 13:43:20Z

2

Just concatenate the strings for the selector like this:

function toggleStuff(id) {
  $('#' + id + ' > .littleme').next().toggle();
  $('#' + id + ' > .littleme').toggle();
  //etc. etc.
}

Define this outside your document.ready function so it's available. Also, you can shorten this if you want as well down to:

  $('#' + id + ' > .littleme').toggle().next().toggle();

answered Mar 11, 2010 at 13:43

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

Comments

Fabian · Accepted Answer · 2010-03-11 13:44:14Z

1

You can just use a regular javascript function:

function Something(id) // id is a jquery object
{
  id.find('.littleme').next().toggle();
  id.find('.littleme').toggle();
  etc. etc.
}

answered Mar 11, 2010 at 13:44

Fabian

13.7k6 gold badges33 silver badges53 bronze badges

Comments

karim79 · Accepted Answer · 2010-03-11 14:07:02Z

0

There is no need to call any inline javascript from your elements. What I would recommend is the following:

$('.threadWrapper').click(function() {
    $(this).find(".littleme").next().toggle();
    $(this).find(".littleme").toggle();
    etc. etc.
});

Looking at your selectors, .littleme is a direct descendant of .threadWrapper. So if you bind a click event to all .threadWrappers you can select the .littlemes by searching within the current context.

Also, if you're interested, those two statements can be consolidated using .end:

$(this).find(".littleme").next().toggle().end().toggle();

edited Mar 11, 2010 at 14:07

answered Mar 11, 2010 at 13:54

karim79

343k67 gold badges420 silver badges409 bronze badges

Collectives™ on Stack Overflow

sending parameters to a jquery function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related