Question

我通过两个名为jYoutube和jGFeed的插件将youtube用户视频频道的Feed添加到页面上。

jGFeed：http://archive.plugins.jquery.com/project/jgfeed
jYoutube：http://archive.plugins.jquery.com/project/jyoutube

我不知道为什么这不起作用......我认为它就像一个简单的if / else语句一样简单，但它不起作用。

jQuery(document).ready(function($) {     
            $.jGFeed('http://gdata.youtube.com/feeds/base/users/POTATOwillEATyou/uploads?alt=rss&v=2&orderby=published&client=ytapi-youtube-profile',
            function(feeds){
                // Check for errors
                if(!feeds){
                    // there was an error
                    return false;
                }
                var html = '';

                // do whatever you want with feeds here
                for(var i=0; i<feeds.entries.length; i++){
                    var entry = feeds.entries[i];

                //My attempt at alternating classes:
                if((i%2) == 0)
                    {
                        console.log('hello')
                        $(".thethumb").addClass("even");
                    }
                else
                    {
                        console.log('NOPE')
                        $(".thethumb").addClass("odd");
                    }
                //End of my attempt

                   html += '<a rel="vidbox" class="thethumb" target="_blank" href="' + entry.link + '" title="' + entry.title + '"><img src="' + $.jYoutube(entry.link, 'small') + '" class="thumb left"></a>';
                }
                $('#you_tube_feed').html(html);
            }, 25);
        });

Answer 1

您的问题是您正在更改所有.thethumb的类，并且在您运行该代码时它们不存在（它们位于您的html字符串中）

for(var i=0; i<feeds.entries.length; i++)
{
    var entry = feeds.entries[i];

    var $new = $('<a rel="vidbox" class="thethumb" target="_blank" href="' + entry.link + '" title="' + entry.title + '"><img src="' + $.jYoutube(entry.link, 'small') + '" class="thumb left"></a>');

    if((i%2) == 0)
    {
        $new.addClass("even");
    }
    else
    {
        $new.addClass("odd");
    }

    $('#you_tube_feed').append($new);
}

Answer 2

由于您使用的是JQuery，因此更加简单。。。首先添加所有缩略图然后返回使用:even和:odd选择器一次添加所有类：

$('.thethumb:even').addClass('odd');
$('.thethumb:odd').addClass('even');

你会注意到，与选择器相比，这些类是切换的。。。这是因为JQuery选择器是从0开始的，因此项目“0”，“2”，“4”等实际上是选择中的第1，第2，第5等项目。

如何将交替类添加到缩略图图像的动态源？

2 个答案: