CODEWITHSUNDEEP
javascriptjquery
Reza Saadati
Reza Saadati

Reputation: 5421

How to select the CLICKED item with jQuery?

I am using this code to remove and a CSS class:

$('.called').click(function() {
    $('called').removeClass('fa-phone-square').addClass('fa-check');
})

The problem is, it removes and adds classes to ALL tags with the class '.called'. I want this function to work only for the single item that has been clicked.

How would I do this?

Upvotes: 1

Views: 792

Answers (3)

Luis
Luis

Reputation: 6001

You would have to do this:

$('.called').click(function() {
    $(this).removeClass('fa-phone-square').addClass('fa-check');
})

"this" inside the click handler refers to the element that has been clicked and which you want to apply the changes.

If you instead apply the ".called" selector again it will select all items with the "called" class and apply the removeClass and addClass to all of them which is the behavior you are experiencing now.

Upvotes: 2

manojlds
manojlds

Reputation: 301037

Inside the callback, $(this) refers to the element that was clicked.

You can also have the event as an argument in the callback and get the clicked element with event.target - https://api.jquery.com/event.target/

Difference between using $(this) and event.target - Difference between $(this) and event.target?

Upvotes: 1

Oka
Oka

Reputation: 26345

In jQuery event handlers this gets bound the the DOM node that fired the event.

$('.called').click(function() {
    $(this).removeClass('fa-phone-square').addClass('fa-check');
})

Upvotes: 3

Related Questions