jQuery .click for multiple elements with same class

Question

I have a small piece of jQuery that I need a bit of help with. Here's what I have:

jQuery:

jQuery(".disableUser").click(function() {
    jQuery(".enableUser").show()
    jQuery(".disableUser").hide();
});

jQuery(".enableUser").click(function() {
    jQuery(".disableUser").show()
    jQuery(".enableUser").hide();
});

HTML:

<tr>
    <td></td>
    <td></td>
    <td></td>
    <td><span class="disableUser">Disable this user</span><span class="enableUser">Enable this user</span></td>
</tr>

.enableUser is set to display:none as default.

As you can see, it is simply hiding or showing an element. My issue is that there are rows in a table, with each row having the same two elements. When I click one row's element it hides or shows all the row's element. I only want it to affect the specific element I am clicking on and not all elements with the same class. I have tried the info found here: http://css-tricks.com/snippets/jquery/click-once-and-unbind/, but I am not sure if I am understanding it or using it correctly.

post relevant html too, you need to target specific elements regarding the one clicked — A. Wolff
– A. Wolff, Commented Aug 2, 2013 at 22:07

Felix Kling · Accepted Answer · 2013-08-02 22:08:36Z

4

You probably want to find the .enableUser and .disableUser of the current row. this will refer to the clicked element and from there you can traverse the DOM and find the right elements:

jQuery(".disableUser").click(function() {
    jQuery(this).hide().closest("tr").find(".enableUser").show();
});

Have a look at the documentation for .closest and .find for more information. You might also want to read more about event handling.

answered Aug 2, 2013 at 22:08

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

3 Comments

Felix Kling Over a year ago

@roasted: Of course! Just tweaked it a little since I don't know if both elements are in the same cell. Thanks!

AndyWarren Over a year ago

Please see above, I added the basic HTML I will be using. Thanks.

AndyWarren Over a year ago

Just commented below on roasted's answer. Both answers work exactly how I wanted it to. Which way is the preferred way of doing it?

A. Wolff · Accepted Answer · 2013-08-02 22:25:08Z

1

jQuery(".disableUser").click(function() {
    jQuery(this).hide().siblings('.enableUser').show();
});

jQuery(".enableUser").click(function() {
    jQuery(this).hide().siblings('.disableUser').show();
});

answered Aug 2, 2013 at 22:25

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

3 Comments

AndyWarren Over a year ago

Both of these answers work exactly how I wanted it to. Which answer is the preferred way of doing it?

A. Wolff Over a year ago

This one is a little bit optimized but nothing you'll never notice so just choose the one which seems more readable for you and upvote both answers :)

AndyWarren Over a year ago

Thanks for your answer, I'm upvoting it for sure. Felix posted his first, so I'll accept his. I'm actually going to use your answer though. Thanks again.

Collectives™ on Stack Overflow

jQuery .click for multiple elements with same class

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related