JQuery find onclick data attribute value

Question

I am trying to get a data value that contains the image url when the user clicks on the thumbnail. HTML is as follows:

<div class="port_image_holder"> <a class="port_enlarge" href="javascript:void(0)"> <img class="lazy" src="html_includes/include_images/image_loading.jpg" data-original="html_includes/include_images/test-image.png" data-large="html_includes/include_images/test-image-large.png" alt="Caption Goes Here.." /> <noscript> <img src="html_includes/include_images/test-image.png" data-large="html_includes/include_images/test-image-large.png" alt="" /> </noscript> </a> </div> 

Basically, when a user clicks on an image, I need to get the url in the data-large attribute.

Currently, I can get url from src using find() method:

 var img_url=$(this).find('img').attr('src'); 

but still could not get a link to the data. Please note that there are several port_image_holder classes on the page, as they loop as needed.

Answer 1

You need to use data () , for example:

 var img_url = $(this).find('img').data('large'); // Check the console for url console.log(img_url);