如何將交替類添加到縮略圖圖像的動態提要？

我通過兩個名爲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); 
     });

來源

2013-04-04 Jean Hules

你的結果是什麼 – smerny 2013-04-04 16:05:12

我的結果是交替控制檯日誌說hello和nope，但沒有類添加到.ththumb。 – 2013-04-04 16:09:11

您的問題是，你正在改變類的所有.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); 
}

來源

2013-04-04 16:09:54

謝謝。像魅力一樣工作。 – 2013-04-04 16:49:49

由於您使用的是JQuery，所以它更加簡單。。。加上所有的縮略圖，然後再回去使用:even和:odd選擇一次全部添加類：

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

你會注意到，類相比，選擇切換。。。這是因爲JQuery選擇器是基於0的，所以項目「0」，「2」，「4」等實際上是選擇中的第1,2,5等項目。

來源

2013-04-04 16:15:48 talemyn

如何將交替類添加到縮略圖圖像的動態提要？

回答

相關問題