JQuery one click event for multiple element events

Question

My question is related to this one: jQuery same click event for multiple elements

However, when I do:

$('.class1, .class2').click(function() {
   some_function();
});

I always use the same function with the same object. What if I wanted to consolidate the following two statements for instance:

$(".class1").click(function () {
  $(".classer1").slideToggle("slow");
});

$(".class2").click(function () {
  $(".classer2").slideToggle("slow");
});

They reference a different object for each - can I even consolidate this?

Thanks, Oliver

You could, but there's probably a better way to do it depending on the html structure. — user400654
– user400654, Commented Mar 20, 2013 at 21:14

j08691 · Accepted Answer · 2013-03-20 21:17:34Z

5

You could do this:

$(".class1, .class2").click(function () {
  $(".classer"+$(this).attr('class').substr(-1)).slideToggle("slow");
});

as long as the elements you're clicking on only have one class. This pulls the integer off the element being clicked on and appends it to .classer. So clicking on .class2 would trigger the toggle on .classer2.

answered Mar 20, 2013 at 21:17

j08691

208k33 gold badges269 silver badges281 bronze badges

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

1 Comment

oliver13 Over a year ago

Almost feels unfair to select ONE answer as they've all been great, but I like this idea! Thanks!

Ahmad Alfy · Accepted Answer · 2013-03-20 21:17:45Z

2

You might want to take a look at add(). Use it to add selectors to the selection stack. Use it like this:

$('.class1').add('.class2').click(function (e) {
    // Do whatever you want
})

answered Mar 20, 2013 at 21:17

Ahmad Alfy

13.4k6 gold badges70 silver badges105 bronze badges

2 Comments

j08691 Over a year ago

How does this answer the question at all?

Ahmad Alfy Over a year ago

maybe if he used this he will reference the object he clicked?

pdoherty926 · Accepted Answer · 2013-03-20 21:18:10Z

2

<div class='common-class' data-id='1'></div>

$('.common-class').on('click', function() {
    if ($(this).data('id')) { 
        $(".classer" + $(this).data('id')).slideToggle("slow");
    }
});

answered Mar 20, 2013 at 21:18

pdoherty926

10.5k5 gold badges47 silver badges75 bronze badges

Comments

acconrad · Accepted Answer · 2013-03-20 21:22:01Z

2

I think the best way to do this is to add a data attribute to the reference number you are using for each of the classes so if you have something like

<div class="class1" data-ref-id="1"></div>

and

<div class="class2" data-ref-id="2"></div>

You could find your referenced toggle class like so:

$('.class1, .class2').click(function (e) {
    $('.' + NAME_OF_REFERENCED_TOGGLE_CLASS + this.data.refId).slideToggle('slow');
})

edited Mar 20, 2013 at 21:22

answered Mar 20, 2013 at 21:14

acconrad

3,2191 gold badge24 silver badges32 bronze badges

4 Comments

Mark Schultheiss Over a year ago

you should put that e in its place in the function()

j08691 Over a year ago

But the OP wants to toggle other elements, not the ones clicked on. .class1 vs .classer1

oliver13 Over a year ago

Exactly j08691 - that's the part I'm struggling with - toggling MULTIPLE items. Or is this possible with target and I don't get it?

acconrad Over a year ago

Ah sorry I misread what was inside. I think my updated answer should help.

user400654 · Accepted Answer · 2013-03-20 21:23:22Z

1

It might be better to select based on the elements location depending on your html. For example, if this were your html:

<dl class="class1 list">
    <dt>Foo</dt>
    <dd>Foobar</dd>
    <dt>Dog</dt>
    <dd>Pitbull</dd>
</dl>
<dl class="class2 list">
    <dt>Foo</dt>
    <dd>Foobar</dd>
    <dt>Dog</dt>
    <dd>Pitbull</dd>
</dl>

you could use:

$(".list dt").click(function(){
    $(this).next("dd").slideToggle();
});

to handle both lists with a single click event.

answered Mar 20, 2013 at 21:23

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Collectives™ on Stack Overflow

JQuery one click event for multiple element events

5 Answers 5

1 Comment

2 Comments

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related