JQuery查找数据属性值onclick

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 .

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

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

但到目前为止,没有运气获得数据参考.请注意,port_image_holder页面上有许多类,因为它们根据需要进行了循环.

Answer 1

你需要在这里使用data():

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

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