Changing the value of jQuery's $(this) object inside an event

Question

I'm wanting to click an image (img#first) and have it split into three smaller versions of another image (img.cat). Each time img.cat is clicked, it throws the cloned elements in random directions and temporarily shows a lion in place of the img.cat that was clicked.

The cat replication and lion popup both work properly (as you can see by clicking the smaller cat in the upper left corner), but I don't know how to make it so a .click() event on img#first will call the function to replicate smaller cats. To reiterate, I want the img#first to spawn 3 smaller img.cat, then disappear, then if the user continues to click new img.cat objects they continue to spawn more of themselves. The problem is just getting that original img#first to start the chain reaction and then disappear forever.

Here's the Fiddle.

If I'm able to just make the entire .click(explode) function work on img#first and then swap that identifier somehow to img.cat after the initial click, wouldn't that do the trick?

For example:

var firstRun = 0
$('img#first').click(function() {
    if (!firstRun) {
        //do original stuff here
        firstRun = 1;
    } else {
        $(this) = $('img.cat');
        //do img.cat stuff here
    }
});

Or do I need to isolate the explode function so that it can be called separately on two different objects while achieving the same effect?

I honestly have no idea how to go about accomplishing either of these tasks. Maybe there's a simpler way to get what I want.

Your fiddle seems to work for me. I click the img#first and 3 smaller cats are spawned, it turns to a lion, and the lion disappears. I can continue to click on the smaller img.cat and the same sequence of events happen. What am I missing? — Sam
– Sam, Commented Jan 10, 2014 at 3:43
You can't reassign the value of this in Javascript like you can a variable, and therefore can't change what $(this) represents in jQuery. One a side note: $('#first') is a more optimal selector than $('img#first'). — Ken Herbert
– Ken Herbert, Commented Jan 10, 2014 at 3:43
@SamSullivan You're clicking on the img.cat. Clicking img#first does nothing. I want it to start the whole process (with img.cat hidden initially). Basically, take the entire functionality behind the img.cat clicking and apply that to a different first image, then resume as normal. — daveycroqet
– daveycroqet, Commented Jan 10, 2014 at 3:45
@winterblood Thanks for the heads up RE: selectors. I'll look into the logic behind that. — daveycroqet
– daveycroqet, Commented Jan 10, 2014 at 3:46

Ken Herbert · Accepted Answer · 2014-01-10 03:53:42Z

1

Add a separate event which triggers only on clicking #first which programmatically triggers a click on img.cat then removes itself like this:

$('#first').click(function() {
    $("img.cat").trigger("click");
    $(this).remove();
});

Here is a working jsFiddle.

answered Jan 10, 2014 at 3:53

Ken Herbert

5,2465 gold badges31 silver badges38 bronze badges

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

1 Comment

daveycroqet Over a year ago

That's precisely the functionality I was seeking. Thank you, sir.

Sam · Accepted Answer · 2014-01-10 03:48:27Z

1

Update your $('img.cat').click() event listener's selector to $('img.cat, img#first) to select both img.cat and img#first. With this new event listener, you can remove your first $('img#first').click() listener. See my updated JSFiddle.

answered Jan 10, 2014 at 3:48

Sam

20.5k2 gold badges48 silver badges71 bronze badges

1 Comment

daveycroqet Over a year ago

Close, but that just creates two different sets of cats. I only want the img#first to be clickable once, then gone forever. This was the first thing I tried. :D Thank you though and I truly appreciate your help.

Collectives™ on Stack Overflow

Changing the value of jQuery's $(this) object inside an event

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related