JSON和Tumblr

Question

好吧，所以我正嘗試使用jQuery JSON創建「按類型訂購帖子」以獲取數據...所有帖子類型均適用於Chrome，Safari，FF。但在IE中，當我使用JSON過濾帖子時，視頻/音頻帖子不會顯示（可能與嵌入有關？）。

有沒有人有線索怎麼回事？！下面的代碼：

<script> 
    $('#order_by ul li').find('a').click(function() { 
    var postType = this.className; 
    var count = 0; 
    byCategory(postType); 
    return false; 

    function byCategory(postType, callback) { 
    $.getJSON('{URL}/api/read/json?type=' + postType + '&callback=?', function(data) { 
    var article = []; 
    $.each(data.posts, function(i, item) { 
    // i = index 
    // item = data for a particular post 
    switch(item.type) { 
    case 'photo': 
    article[i] = '<div class="post_wrap"><div class="photo"><a href="' 
     + item.url 
     + '" title="View Full Post" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/0yplawef6/link_photo.png" /></a><a href="' 
     + item.url 
     + '"><img src="' 
     + item['photo-url-1280'] 
     + '"alt="image" /></a></div></div>'; 
    count = 1; 
    break; 
    case 'video': 
    article[i] = '<div class="post_wrap"><div class="video"><a href="' 
     + item.url 
     + '" title="View Full Post" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/FWAlawenw/link_video.png" /></a><span><br />' 
     + item['video-player'] 
     + '</span><div class="video_desc">' 
     + item['video-caption'] 
     + '</div></div></div>'; 
    count = 1; 
    console.log(article[i]); 
    break; 
    case 'audio': 
    article[i] = '<div class="post_wrap"><div class="audio"><a href="' 
     + item.url 
     + '" title="View Full Post" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/e8Zlawemi/link_audio.png" /></a><h2 class="heading"><a href="' 
     + item.url + '">' 
     + item['id3-artist'] 
     +' - ' 
     + item['id3-title'] 
     + '</a></h2><div class="player"><br />' 
     + item['audio-player'] 
     + '<p>' + item['id3-artist'] + ' - ' + item['id3-title'] + '</p>' 
     + '<p>' + item['audio-plays'] + ' plays</p>' 
     + '</div><div class="audio_desc">' 
     + item['audio-caption'] 
     + '</div><div class="clear"></div></div></div>'; 
    count = 1; 
    break; 
    case 'regular': 
    article[i] = '<div class="post_wrap"><div class="regular"><a href="' 
     + item.url 
     + '" title="View Full Post" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/LH3laweb7/link_text.png" /></a><h2 class="heading"><a href="' 
     + item.url 
     + '">' + item['regular-title'] 
     + '</a><div class="description_container">' 
     + item['regular-body'] 
     + '</div></div></div>'; 
    count = 1; 
    break; 
    case 'quote': 
    article[i] = '<div class="post_wrap"><div class="quote"><a href="' 
     + item.url 
     + '" title="View Full Post" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/1Lwlaweh7/link_quote.png" /></a><blockquote>' 
     + item['quote-text'] 
     + '</blockquote><cite>- ' 
     + item['quote-source'] 
     + '</cite></div></div>'; 
    count = 1; 
    break; 
    case 'conversation': 
    article[i] = '<div class="post_wrap"><div class="chat"><a href="' 
     + item.url 
     + '" title="View Full Post" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/NZ9lawekt/link_chat.png" /></a><h2 class="heading"><a href="' 
     + item.url 
     + '">' + item['conversation-title'] 
     + '</a></h2></div></div>'; 
    count = 1; 
    break; 
    case 'link': 
    article[i] = '<div class="post_wrap"><div class="link"><a href="' 
     + item.url 
     + '" title="View Full Post" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/G1zlaweir/link_link.png" /></a><h2 class="heading"><a href="' 
     + item['link-url'] 
     + '">' + item['link-text'] 
     + '</a></h2></div></div>'; 
    count = 1; 
    break; 
    default: 
    alert('No Entries Found.'); 
    }; 
    }) // end each 

    if (!(count == 0)) { 
    $('#main_content') 
     .fadeOut('fast') 
     .html('<div class="post_wrap"><div class="regular"><h2 class="heading">Displaying ' 
     + postType 
     + ' Posts Only</h2></div></div>' 
     + '<div class="post_wrap"' 
     + article.join('') 
     + '</div>' 
    ).fadeIn('fast') 

       $('div.video').each(function() { 
     var video_container_height = $(this).innerHeight(); 
      video_container_height = (video_container_height - 60) 

     $(this).children('div.video_desc').css(
     {'position': 'absolute', 
     'top': '40px', 
     'right': '20px', 
     'width': '380px', 
     'height': video_container_height} 
     ).jScrollPane({ 
     verticalGutter: 25 
     }); 
     }); 







    $('div.audio div.audio_desc').each(function() { 
     var container_width = $('div.audio').outerWidth(true); 
     var player_width = $('div.audio div.player').outerWidth(true); 
     var audio_desc_width = (container_width - player_width); 

     $(this).css(
     {'position': 'absolute', 
     'top': '75px', 
     'right': '20px', 
     'height': '125px', 
     'width': (audio_desc_width - 50 /*The size of the left and right margin*/)}) 
     .jScrollPane({ 
     verticalGutter: 25 
     }); 
    }); 


    } else { 

    $('#main_content') 
     .fadeOut('fast') 
     .html('<div class="post_wrap"><div class="regular"><h2 class="heading">Whoops! There are no ' 
     + postType 
     + ' Posts To Display</h2></div></div>' 
    ).fadeIn('fast') 
    } // end IF 

    }); // end getJSON 
    }; // end byCategory 
    }); // end click 


    </script> 

，然後才能通過檢查出現場版，頭http://minimus.tumblr.com

Answer 1

我覺得你的問題是由一個微小的誤差在行1690所致：

$('#main_content') 
    .fadeOut('fast') 
    .html('<div class="post_wrap"><div class="regular"><h2 class="heading">Displaying ' 
     + postType 
     + ' Posts Only</h2></div></div>' 
     + '<div class="post_wrap"' // line 1690: you are missing a '>' 
     + article.join('') 
     + '</div>' 
    ).fadeIn('fast')