Question

我正在尝试将播放列表中的YouTube视频列表显示在我的页面上。我可以让视频显示得很好。我正在尝试按视频的名称或日期添加“排序”，但是当我添加代码时，页面根本不会渲染视频。

这是HTML：

<div class="hg-portfolio-sortable">
<div id="sorting" class="fixclear"> <span class="sortTitle">Sort By: </span>

    <ul id="sortBy" class="option-set " data-option-key="sortBy" data-default="">
        <li><a href="#sortBy=name" data-option-value="name">Name</a>
        </li>
        <li><a href="#sortBy=date" data-option-value="date">Date</a>
        </li>
    </ul> <span class="sortTitle">Direction: </span>

    <ul id="sort-direction" class="option-set " data-option-key="sortAscending">
        <li><a href="#sortAscending=true" data-option-value="true">ASC</a>
        </li>
        <li><a href="#sortAscending=false" data-option-value="false">DESC</a>
        </li>
    </ul>
</div>
<ul id="portfolio-nav" class="fixclear">
    <li class="current"><a href="#" data-filter="*">All</a>
    </li>
    <li><a href="#" data-filter=".websites">Websites</a>
    </li>
    <li><a href="#" data-filter=".print">Print</a>
    </li>
    <li><a href="#" data-filter=".logo">Logo</a>
    </li>
</ul>
<div class="clear"></div>
<ul id="thumbs"></ul>

这是$(window).load(function())中的脚本：

    //SORTING CODE
// settings
var sortBy = 'date',
    sortAscending = true,
    theFilter = ''; // DEFAULT FILTERING CATEGORY 

$('#sortBy li a').each(function (index, element) {
    var $t = $(this);
    if ($t.attr('data-option-value') == sortBy) $t.addClass('selected');
});
$('#sort-direction li a').each(function (index, element) {
    var $t = $(this);
    if ($t.attr('data-option-value') == sortAscending.toString()) $t.addClass('selected');
});
$('#portfolio-nav li a').each(function (index, element) {
    var $t = $(this),
        tpar = $t.parent();
    if ($t.attr('data-filter') == theFilter) {
        $('#portfolio-nav li a').parent().removeClass('current');
        tpar.addClass('current');
    }
});


if ($("ul#thumbs").length > 0) {
    var $container = $("ul#thumbs");
    $container.isotope({
        itemSelector: ".item",
        animationEngine: "jquery",
        animationOptions: {
            duration: 250,
            easing: "easeOutExpo",
            queue: false
        },
        filter: theFilter,
        sortAscending: sortAscending,
        getSortData: {
            name: function ($elem) {
                return $elem.find("span.name").text();
            },
            date: function ($elem) {
                return $elem.attr("data-date");
            }
        },
        sortBy: sortBy
    });
}
//END SORTING CODE

//VIDEO CODE
var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/SP8CE46F72D4FE9E45?v=2&alt=json&max-results=50&callback=?';
var videoURL = 'http://www.youtube.com/watch?v=';
$.getJSON(playListURL, function (data) {
    var list_data = "";
    var column_count = -1; // -1;
    var end_li = "</li>";
    var begin_div = "<div class='inner-item'>";
    var end_div = "</div>";
    var html_data = "";

    $.each(data.feed.entry, function (i, item) {
        column_count = column_count + 1;
        var feedTitle = item.title.$t;
        var feedURL = item.link[1].href;
        var videoDate = item.published.$t;
        var fragments = feedURL.split("/");
        var videoID = fragments[fragments.length - 2];
        var description = ""; item.description; //RETURNS Undefined.
        var url = videoURL + videoID;
        var thumb = "http://img.youtube.com/vi/" + videoID + "/default.jpg";
        var begin_li = "<li class='item websites ###' data-date='" + videoDate + "'>";
        var even_odd = "even";
        var begin_h4 = "<h4 class='title'>";
        var end_h4 = "</h4>";

        if (column_count % 2) even_odd = "odd";

        begin_li = begin_li.replace("###", even_odd);

        html_data += begin_li + begin_div +
            '<a data-rel="prettyPhoto[iframes]" class="hoverLink" href="' + url + '">' +
            '<img src="' + thumb + '" alt="' + feedTitle + '" />' +
            '</a>' + begin_h4 +
            '<a href="' + url + '" target="_blank"><span class="name">' + feedTitle + '</span></a>' + end_h4 +
            '<span class="moduleDesc">' +
            '<p>' + description + '</p>' +
            '</span>' +
            '<div class="clear"></div>' + end_div + end_li;
    });
    $(html_data).appendTo("#thumbs");

});

简而言之，getJSON为每个视频创建html并将其附加到<ul id="thumbs">标记。再次，这是有效的，但当我添加我的“排序”代码时，页面现在根本不呈现。有什么想法吗？另外，我尝试从Feed中获取“说明”，但item.description返回undefined，但是有所有这些视频的说明吗？而且我也想弄清楚为什么它会从“从右到左”显示它们。如果你拿下小提琴并将/show追加到最后，你会看到我在说什么。为什么不按预期将它们“左右”追加？

这是一个把它放在一起的小提琴：UPDATED Fiddle我正在使用jQuery 1.8.2。（尽管小提琴说1.8.3）。

更新

很抱歉与jsFiddle的混淆......我不知道每次按“更新”后，我还需要向所有人提供该网址（我认为它会更新旧的网址）。无论如何，最新的一个现在在链接中。随着小提琴目前的位置（版本＃22），我遇到的问题是：

1。）没有显示视频。如果你注释掉这一行var playListURL=...之上的所有内容，那么你会看到你获得了视频....但当然，没有排序。 2.）仍无法从每个视频中获取description（item.description返回undefined） 3.）如果您注释掉＃1中的代码，然后将/show附加到URL的末尾，您将看到呈现的HTML，视频和所有内容（没有排序），但向下滚动，您将看到它们与右边对齐，而不是左边。

Answer 1

针对您的描述问题

http://jsfiddle.net/guMQa/23/

我们必须使用这个JS来获取该信息

var description =  item.media$group.media$description.$t;

希望能帮到你。我将调查其余部分，并在我去时更新

这是你想要的吗？

http://jsfiddle.net/guMQa/24/

Answer 2

为什么不按预期将它们“左右”追加？

追加意味着添加到结尾。您可能需要.prepend()

使用console.log(data)很容易找到说明：

item.media$group.media$description.$t

缩略图未显示的原因可能是动画，导致元素获取CSS属性overflow: hidden和height: 0，这基本上使元素不可见。

jQuery块导致页面无法呈现

2 个答案: