jQuery this selector not working on Image

Ok, I have a bunch of images with the same ID of "mashupButton", however I was under the impression that if I make a jQuery click function using "this", instead of "#mashupButton" it would only perform the function on the image clicked. This works for me, but only for the first image with that ID on the page, an开发者_如何学Cd after I've done it once, it no longer works.

After document is ready:

$("#mashupButton").click(function()
                {
                    $(this).effect("drop", {direction:"up"}, 1000);
                });

Tag is like:

<a href="#" onClick="differentFunction"><img src="imagename.png" id="mashupButton"></a>

So to clarify: I have say 10 images all with the ID mashupButton - I have a jQuery effect that is performed on that specific image when it is clicked. However it only works on the FIRST of those images, even though they all contain the same ID. Do I need to have unique ID's for each one, or can it be achieved this way somehow?

The values for "id" attributes must be unique within a page. It is not correct markup to re-use "mashupButton" as the "id" for a "bunch" of images. Each <img> tag must have its own unique "id" (or no "id" at all, of course). You could use the "class" attribute to mark such <img> elements as being candidates for your "click" handler, of course.

I have say 10 images all with the ID mashupButton

It is illegal to have more than one element with the same id.

If you want to use one selector, you should add a classname.

To expand on @Pointy's answer... yes, the id values must be unique. If you can change the markup, simply change the id attributes to class attributes.

<img src="imagename.png" class="mashupButton" ...

Then your jQuery would look like:

$( '.mashupButton' ).click( function() ...

You have a syntactically-invalid page. When you have troubles, you should always validate your HTML (and validate your CSS) before looking any further.

Instead create a class for those images and then use jQuery to add the click to all the images.

$(".mashupButton").click(function()
                {
                    $(this).effect("drop", {direction:"up"}, 1000);
                });


<a href="#" onClick="differentFunction"><img src="imagename.png" class="mashupButton"></a>