在jQuery中使用HTML數據屬性附加div

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的片段一旦grid-block元素被點擊追加一個div一類的video。

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

我希望能夠做的是嵌入在這個video DIV，顯示了Vimeo的視頻的iframe，與data-video屬性上面是視頻ID。

這將是視頻ID替換爲XXXXXXX的Vimeo嵌入代碼;

<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>'); 
});