Databases
StackOverflow2013
Postsdbo
POGetting an attribute value from a parent function in jquery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGetting an attribute value from a parent function in jquery
    text
    copied!<p>I'm new to jquery, so please forgive, well... everything!</p> <p>I have a 'header bar' made up of about 10 small thumbnail-style images. I would like to be able to click on these images which would then change a larger side-bar image to show a larger version.</p> <p>Which, with some fiddling about, I seemed to manage by using the following code for the images: </p> <pre><code>&lt;img src="header_images\small1.jpg" alt="alttext" class="hdrimage" id="1" data-bigimage="big1.jpg" /&gt; &lt;img src="header_images\thumb2.jpg" alt="alttext" class="hdrimage" id="2" data-bigimage="bigger2.jpg" /&gt; </code></pre> <p>etc...</p> <p>I then added some jquery code at the bottom of the page:</p> <pre><code>$(".hdrimage").bind('click', function() { $("#swappyimage").attr("src", "header_images/"+$(this).attr("data-bigimage")); }) </code></pre> <p>I'm not sure if that was the best way to do it, but it seems to work fine.</p> <p>I then thought it would be nice to fade-out the old image and fade-in the new one, so added a .fadeOut("slow"); to the click event, but on testing it doesn't wait until the fade is complete before it swaps the image. Thanks to Google, I discovered I need to use a callback function on the .fadeOut to achieve this, so I tried something like:</p> <pre><code>$(".hdrimage").bind('click', function() { $("#swappyimage").fadeOut('slow', function() { $("#swappyimage").attr("src", "header_images/"+$(this).attr("data-bigimage")); }) }) </code></pre> <p>But this no longer works. I'm fairly sure it's because the $(this) is now referring to #swappyimage rather than the .hdrimage that was clicked. I can't figure-out how to reference the attribute I need from the thumbnail (.hdrimage) that is clicked to trigger the whole thing, so would appreciate some help.</p> <p>I hope I explained that well enough! </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload