Использовать атрибут данных HTML в jQuery appended div

Question

Использовать атрибут данных HTML в jQuery appended div

0

Я создаю простой портфолио для моего клиента, и я хочу иметь возможность динамически вставлять видео Vimeo в div, который добавляется через jQuery с использованием атрибутов данных HTML

Ниже приведена моя разметка HTML с идентификатором видео Vimeo, который хранится в виде data-video

<div class="grid-block" data-video="32001208">
    <img src="http://placekitten.com/225/125"/>
</div>

И это мой текущий фрагмент jQuery, который добавляет div с классом video после нажатия элемента элемента grid-block.

$( ".grid-block" ).click(function() {
    $( this ).append( "<div class='video'>" );
});

То, что я хочу сделать, - это вставить iframe в этот video, где показано видео Vimeo, причем атрибут data-video выше является идентификатором видео.

Это будет код Vimeo embed с идентификатором видео, замененным на XXXXXXX;

<iframe src="//player.vimeo.com/video/XXXXXXXX?title=0&amp;byline=0&amp;portrait=0&amp;color=bc2026" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Надеюсь, это было ясно и заблаговременно за любую помощь.

Dean Elliott 06 янв. 2014, в 11:22

Источник

Теги:

jquery

html5

custom-data-attribute

1 ответ

Ещё вопросы

Arun P Johny · Accepted Answer · 2014-01-06T07-30-00.000Z

почему бы не использовать данные api для доступа к значению атрибута data-*

$(".grid-block").click(function () {
    $(this).append('<div class="video"><iframe src="//player.vimeo.com/video/' + $(this).data('video') + '?title=0&amp;byline=0&amp;portrait=0&amp;color=bc2026" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>');
});