Question

I have a short question, please 🙂

I have a script where i make 5 images visible.
The user controls the order in which he clicks the images.

So what I’m trying to accomplish:
If the last image is clicked, there should be a div displayed.

How does jQuery knows if the 5th image is clicked?

The rest (fade-in the div) i figured out already.

Could you please be so kind and give me a little hint on that? 🙂

Answer 1

If you make your click handler add a class when an image is clicked.

$(this).addClass("hasBeenClicked");

then you can then check the number of clicked images thus

if ($("img.hasBeenClicked").length === 5) { alert("All 5 have been clicked"); }

To break it down,

img.hasBeenClicked

is CSS selector syntax for “all the <IMG> elements that have the hasBeenClicked class”. You can test this out by adding the CSS <style>img.hasBeenClicked { border: 4px solid red }</style> to your HTML and seeing what gets a fat red border.

$("img.hasBeenClicked")

then just invokes the jQuery query operator, $, to fetch an array of the <IMG> elements that have that class.

$("img.hasBeenClicked").length

uses the array .length property to get the number of <IMG> elements with that class.

$(this).addClass("hasBeenClicked");

is just book-keeping that puts the hasBeenClicked class on images when they’re clicked. It won’t overcount, since no matter how many times a single image is clicked, it only counts once in the array of nodes returned by $.