How to apply a jquery call to only to the image clicked, not the entire page

Question

I am using xslt and javascript to show a table of data. One of my pieces of table data is an image which i am using as a button, this button is in a for-each tag so it appears in each instance of data from the xml. I use jquery to hide this button when clicked on to inturn show more button links which work fine, the only problem is it does this for every button on the page when i want to apply this to only the image being clicked. How can i work around this problem considering i am working on an xsl file, so each button will not have a unique id due to the for each tag?

for some more background info, I used the class attribute and selected it in jquery but am open to implementing a different solution altogether.

Any help is greatly appreciated,

Thanks in advance

Answer 1

Assuming you have the handler for the button , you should use

$(this).hide() instead of $('.buttonclass').hide()

Basically inside the handler, use this which is the element that triggered the event. Using which you can access the corresponding element, element's parent, siblings and so on..

Answer 2

You should pass the reference of the click.

eg:

<img onclick="hideImage(this)" />

then in the function:

function hideImage(img){
  //img is your image
}

Or better, to avoid an event for each image, you can delegate the event to a parent node, may be the table:

<table onclick="hideImage(event)">

then in the function:

function hideImage(ev){
  var elm = ev.target || ev.srcElement;
  if(elm.tagName !== 'IMG'){
    elm = elm.getElementsByTagName('IMG')[0];
  }
  //elm is your image
}

Answer 3

Assuming your HTML/XML is like this

<ul class="someClass">
    <li><img src="/some/path" /></li>
    <li><img src="/some/path" /></li>
</ul>

Using jQuery 1.7+, you could do something like this

$('ul.someClass').on( 'click', 'img', function( event ) {
    var imgElement = this;

    $(imgElement).hide();
});

In the above JavaScript code, ul.someClass refers to a common parent of all images elements, and img refers to elements which should trigger the handler. In the handler itself, the variable this is set to the element which has triggered the event, and in your case it refers to a img element. This code use event delegation, which is very powerful and useful.

If you use jQuery 1.4+ (but prior to 1.7, of course), you can do it that way:

$('ul.someClass').delegate( 'img', 'click', function( event ) {
    var imgElement = this;

    $(imgElement).hide();
});

If your version is prior to 1.4, then you should updated it , or you can do it like this:

$('ul.someClass').find('img').bind('click', function( event ) {
    var imgElement = this;

    $(imgElement).hide();
});

This snippet won't use event delegation.

If you don't use jQuery at all, you can do something like this (here is a working demo http://jsfiddle.net/pomeh/u6etD/ ):

function hideElement( element ) {
    // code to hide "element" variable
}

function hideImageHandler( event ) {
    var target = event.target || event.srcElement;

    // make sure the click happened on an <img /> element
    if ( target && target.nodeType === 1 && target.tagName.toLowerCase() === 'img' ) {
        hideElement( target );
    }

}


var ul = document.getElementsByTagName('ul')[0];

if ( ul.addEventListener ) {
    ul.addEventListener( 'click', hideImageHandler, false );
}
else if ( ul.attachEvent ) {
    ul.attachEvent( 'onclick', hideImageHandler);
}