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

Posted 2023-03-05

【中文标题】如何在 jQuery 中单击时找到 data-* 属性值？

【英文标题】：How do I find data-* attribute value on click in jQuery?

【发布时间】：2013-06-05 19:55:54

【问题描述】：

当用户单击缩略图时，我正在尝试检索包含图像 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"
         />
    <noscript>
        <img src="html_includes/include_images/test-image.png"
             data-large="html_includes/include_images/test-image-large.png"
              />
   </noscript>
</a>
</div>

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

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

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

但到目前为止还没有获得数据参考。请注意，页面上有许多 port_image_holder 类，因为它们会根据需要循环播放。

【问题讨论】：

不是这个：var img_url=$(this).find('img').attr('data-large'); ?

哈哈 - 有时答案很明显 - 谢谢 :)

或者使用 $(this).find('img').data('large') 怎么样？

谢谢@halib - 试过了，但由于某种原因没有奏效 - 再试一次，它成功了！也许我在最初的尝试中有错字。

【参考方案1】：

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

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

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