JavaScript — получение значения атрибута данных из HTML в JQuery
Поэтому у меня есть куча изображений, для которых я добавляю несколько атрибутов данных, которые я хочу использовать позже в 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, которые могут помочь мне показать, как я могу передать это значение в эту функцию.
Любая помощь очень ценится!
Решение
Я бы использовал цикл each, получите атрибут, затем позвоните cropper
$(".img-holder > img").each(function() {
var size = $(this).data("aspect-ratio");
$(this).cropper({
aspectRatio: size
});
});
Другие решения
Других решений пока нет …