从html获取数据属性值到jquery

Question

所以我有一堆图像，我正在为其添加一些数据属性，我想稍后在 jquery 中使用它们。

PHP/HTML 看起来像这样：

<? 
foreach($images as $image) 
{
?>
<div class='dyn-img'>
  <img <!-- start image tag -->
      src="<? echo $image['src']?>"
      data-aspect-ratio ="<? echo $image['aspect_ratio']?>"
      ... //other dynamic data attribs
  > <!-- end image tag -->
</div>
<?
}
?>

稍后在 jQuery 中，我需要获取这些动态加载的图像并将它们的纵横比传递给一个库函数：

所以在我做的 jQuery 部分（在 document.ready fn 中）：

$(".img-holder > img").cropper({
  aspectRatio: 1, //<-- this needs to be the data-aspect-ratio defined earlier
  ... other attributes...
});

我尝试使用 aspectRatio: this.data("aspect-ratio") 但这给了我一个 javascript 错误提示

TypeError: this.data is not a function
aspectRatio: this.data("aspect-ratio"),

我的 jQuery 技能是基本的，所以我希望这里有一些 jQuery/Javascript 大师可以帮助向我展示如何将这个值传递给这个函数。

非常感谢任何帮助！

Answer 1

我会使用each循环，获取属性，然后调用cropper

$(".img-holder > img").each(function() {
    var size = $(this).data("aspect-ratio");
    $(this).cropper({
        aspectRatio: size
    });
});