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

How to add alternating classes to dynamic feed of thumbnail images?

本文关键字：图像 略图 动态 添加      更新时间：2023-09-26

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

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

你的问题是你正在改变所有.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);
}

既然使用的是JQuery，那就更简单了…首先添加所有缩略图，然后返回使用:even和:odd选择器一次性添加所有类:

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

您会注意到，与选择器相比，类是切换的…这是因为JQuery选择器是基于0的，所以"0"、"2"、"4"等项实际上是选择项中的第一、第二、第五等项。

相关文章：