jQuery - 將數據屬性插入變量

Question

當您單擊加載更多時，我正試圖在li上使用其data-youtube屬性加載YouTube視頻。問題是這似乎並沒有工作，它只是呈現出[對象對象]

任何人都知道我做錯了，請嗎？

http://jsfiddle.net/qxxq9u21/

var youtubeID = $('.video-list li').each(function() { 
    $(this).attr('data-youtube'); 
}); 


$('.load').click(function() { 
    var video = '<iframe src="http://www.youtube.com/embed/' + youtubeID + '?wmode=opaque?hd=1&rel=0&autohide=1&showinfo=0" frameborder="0"></iframe>'; 

    $('.video-list li').find('iframe').remove(); 
    $('.video-list li').append(video); 

    return false; 
}); 

Answer 1

有多個問題/在你的代碼的誤解：

1. 您each()功能僅在頁面加載執行一次，再加所以你什麼也得不到它不返回任何東西在您的var youtubeID。

2. 您append()功能適用於所有列表元素，所以你會得到在每一個<li>所有視頻（在你的例子就是二）

什麼，我改變，使其工作：
所以我把each()函數放入你的click事件中，這樣它就可以在每次點擊時執行。在each()函數中我附加了視頻iframe到$(this)，在這種情況下是當前<li>元素each()正在迭代。所以你只有一次你想要的視頻。
和$(this).data("youtube")您可以讀取您的<li>的data-youtube屬性的值。

在這裏你有一個工作示例：

$('.load').click(function() { 

    $('.video-list li').find('iframe').remove(); 

    $('.video-list li').each(function() { 
     $(this).append('<iframe src="http://www.youtube.com/embed/' + $(this).data("youtube") + '?wmode=opaque?hd=1&rel=0&autohide=1&showinfo=0" frameborder="0"></iframe>'); 
    }); 
    return false; 
}); 

和這裏的工作JSFiddle

Answer 2

jQuery的每個返回一個jQuery對象，這就是爲什麼你越來越[對象對象]在你的網址。即使返回的是一組youtube標識，您仍然對如何構建iframe html存在問題。

我建議改變你的jQuery了一下。在您的點擊事件中，循環訪問具有YouTube的數據屬性的每個列表項，並構建並替換您的iframe。

$('.load').on('click', function(){ 
    $('.video-list > li[data-youtube]').each(function(item, index){ 
     var video = '<iframe src="http://www.youtube.com/embed/' + $(this).data('youtube') + '?wmode=opaque?hd=1&rel=0&autohide=1&showinfo=0" frameborder="0"></iframe>'; 
     $(this).find('iframe').remove(); 
     $(this).append(video); 
    }); 

    return false; 
});