Question

当您点击加载更多时，我正在尝试使用li上的data-youtube属性加载YouTube视频。问题是这似乎不起作用，它只是渲染出[对象对象]

任何人都知道我做错了吗？

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

您的代码中存在多个问题/误解：

您的each()函数仅在页面加载时执行一次，而且它不返回任何内容，因此您的var youtubeID中没有任何内容。
您的append()功能已应用于所有列表元素，因此您将获得每个<li>中的所有视频（在您的示例中为两个）

我改变了什么让它发挥作用：
所以我将each()函数放在click事件中，以便在每次点击时执行。在each()函数中，我将视频iframe附加到$(this)，在这种情况下，当前<li>元素each()正在迭代。所以你只需要一次你真正想要的视频。
使用$(this).data("youtube")，您可以阅读data-youtube的{{1}}属性的值

这里有一个有效的例子：

<li>

这是工作JSFiddle

Answer 2

jQuery每个都返回一个jQuery对象，这就是你在url中获取[Object object]的原因。即使返回了一系列youtube id，你仍然会遇到构建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;
});

jQuery - 将数据属性插入变量

2 个答案: