javascript - How do I find data-* attribute value on click in jQuery? - Stack Overflow

admin管理员组

文章数量:1279213

I am trying to retrieve a data value which contains an image url when the user clicks on a thumbnail image. 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 the user clicks on the image I need to obtain the url set in the data-large attribute.

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

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

but so far have had no luck getting the data reference. Please note that there are numerous port_image_holder classes on the page as these are looped out as required.

I am trying to retrieve a data value which contains an image url when the user clicks on a thumbnail image. 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 the user clicks on the image I need to obtain the url set in the data-large attribute.

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

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

but so far have had no luck getting the data reference. Please note that there are numerous port_image_holder classes on the page as these are looped out as required.

• javascript
• jquery
• jquery-selectors
• attributes

Share Improve this question Follow edited May 2, 2020 at 16:02 palaѕн 74k1717 gold badges122122 silver badges139139 bronze badges asked Jun 10, 2013 at 7:50 SideshowSideshow 1,36166 gold badges2828 silver badges5050 bronze badges 4

• 2 not this: var img_url=$(this).find('img').attr('data-large'); ? – Ivan Chernykh Commented Jun 10, 2013 at 7:52
• haha - sometimes the answers are so obvious - thanks :) – Sideshow Commented Jun 10, 2013 at 7:53
• or what about using $(this).find('img').data('large') ? – halilb Commented Jun 10, 2013 at 7:54
• Thanks @halib - tried this but for some reason did not work - just tried it again and it did ! Perhaps I had a typo in my original attempt. – Sideshow Commented Jun 10, 2013 at 7:57

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

You can find data-large attribute on the image using .data() method like:

var img_url = $(this).find('img').data('large');

// Check the console for url
console.log(img_url);

本文标签： javascriptHow do I find data* attribute value on click in jQueryStack Overflow