Question

我正在为我的客户创建一个简单的投资组合布局，我希望能够动态地将Vimeo视频嵌入到使用HTML数据属性通过jQuery追加的div中

以下是我的HTML标记，其中Vimeo视频ID存储为data-video

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

这是我当前的jQuery代码段，在点击video元素后会附加一个类grid-block的div。

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

我希望能够做的是在显示Vimeo视频的video div中嵌入一个iframe，上面的data-video属性是视频ID。

这是Vimeo嵌入代码，视频ID已替换为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>

我希望这很清楚，并提前感谢任何帮助。

Answer 1

为什么不使用data 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>');
});

在附加jQuery的div中使用HTML数据属性

1 个答案: