如何在jQuery中找到点击时的data-*属性值？

Question

我想在用户点击缩略图时，获取一个包含图片网址的数据值。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>

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

目前我可以从 src 使用 find() 方法。

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

但到目前为止，还没有得到数据参考。请注意，有许多 port_image_holder 类，因为这些都是根据需要进行循环的。

Answer 1

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

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

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