Jquery select clicked element within a set of elements with the same classname

Question

Maybe you guys can help me out with this, I've been struggling with it for the past 30 minutes.

Let's say I have four elements with the same class.

<div class="test">hi</div>
<div class="test">hey</div>
<div class="test">yo</div>
<div class="test">What's up</div>

How can I select the one that was clicked on?

I was able to get it work like this:

$('.test').click(function() {
    $(this).toggleClass("btn-danger btn-success");
});

However, I need it to fire without being clicked on success after an ajax call, so I need to be able to do something like this (failed attempts):

$('.test', this).toggleClass("btn-danger btn-success"); // This did not work

$(this).find('.test').toggleClass("btn-danger btn-success");  // Also did not work

Any suggestions? Thanks so much!!

Answer 1

It sounds like the ajax call is made when one of the elements is clicked, but you need to pass different values in the ajax call depending on which element is clicked. Rather than use an "onclick" attribute, you could do the following:

HTML:

<div class="test" data-param1="value1a" data-param2="value2a">hi</div>
<div class="test" data-param1="value1b" data-param2="value2b">hey</div>
<div class="test" data-param1="value1c" data-param2="value2c">yo</div>
<div class="test" data-param1="value1d" data-param2="value2d">What's up</div>

JavaScript:

$('.test').click(function() {
    var $div = $(this);
    $.ajax(url, {
        data: {
            param1: $div.attr('data-param1'),
            param2: $div.attr('data-param2')
        },
        success: function() {
            $div.toggleClass("btn-danger btn-success");
        }
    });
});

Of course, you would set the values of the data- attributes using PHP variables.

Answer 2

Use the trigger function....

So attach the click handler...

$('.test').on('click', function() {
  $(this).toggleClass("btn-danger btn-success");
});

Then in your ajax success function....trigger that click...

$('.test').trigger('click');

But determining which one to trigger will be the trick.

How do you know which one to click, based on the ajax????

If you're just doing an ajax call, based on which link you cick then the solution is much simpler.......cuz you already know which link was clicked

$('.test').click(function() {
var link = $(this);
$.ajax(url, {
    success: function() {
        link.toggleClass("btn-danger btn-success");
     }
   });
});

Answer 3

 $('.test').click(function(){
   clicked = $(this);
 });

The above code returns an array of a single item. So use index 0 to select it as below:

$('.test').click(function(){
  clicked = $(this)[0];
});

Answer 4

Is it not possible to give each of these an ID so you can access them directly?

If you are triggering them on a callback function can you create a reference to the clicked div in a variable?

i.e.

 var clicked;

 $('.test').click(function(){
     clicked = $(this);
 });

then in your ajax response:

 clicked.toggleClass("btn-danger btn-success");