javascript - 如何在 jQuery 中单击时查找 data-* 属性值？

Question

当用户单击缩略图图像时，我试图检索包含图像 url 的数据值。 HTML如下:

<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>

基本上，当用户点击图片时，我需要获取 data-large 属性中设置的 url。

目前我可以使用 find() 方法从 src 获取 url:

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

但到目前为止还没有运气获得数据引用。请注意，页面上有许多 port_image_holder 类，因为这些类是根据需要循环的。

Answer 1

您可以使用 .data() 在图像上找到 data-large 属性方法如:

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

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