0

我在 tumblr 中知道这个问题，代码被剥离，音频播放器坏了。

我现在正在使用 flexslider.js，但问题几乎相同。我用这个修复了它

    setTimeout(function() {                        
                $('.audio').each(function(){
                    var audioID = $(this).parent().attr("id");
                    var $audioPost = $(this);
                    $.ajax({
                        url: '/api/read/json?id=' + audioID,
                        dataType: 'jsonp',
                        timeout: 50000,
                        success: function(data){
                            if ($audioPost.html().indexOf("is required to") != -1) {
                            $audioPost.append('<div style=\"background-color:black;">' + data.posts[0]['audio-player'] +'</div>');
                                }
                            }
                    });
                });
            }, 2000);

您需要调整浏览器窗口的大小才能看到这一点，因为我是从移动版本开始编码的，无论如何...在永久链接页面http://tmbeta.tumblr.com/post/21264072020上看起来还可以，但在照片集时却不行（使用 flexslider）和播放器在同一页面http://tmbeta.tumblr.com/

看看玩家是如何添加到帖子底部的？我希望它出现在显示 [需要 Flash 9 才能收听音频。] 的位置。我知道这基本上是 .append 所做的，但我对 jquery 不够熟悉，所以我真的很难找到解决方案。

4

1 回答 1

1

查看您的 HTML，结果并不令人惊讶：您正在append()使用 class 将元素范围限定audio为<article>. jQuery 将 new 附加div到该范围的末尾 - 这是文章的底部。您需要更改元素插入的范围，或者通过

  1. 迭代类的元素audio-player而不是audio，即

    $('.audio-player').each(function(){ … }

    由于这改变了 的范围this，您还必须调整检索帖子 ID 的行以查找元素层次结构，即

    var audioID = $(this).parents('.audio').attr('id');

    或通过

  2. 将元素插入范围限定为适当的播放器元素，即

    $audioPost.find('.audio-player').append('<div style=\"background-color:black;">' + data.posts[0]['audio-player'] +'</div>');

    如果您宁愿替换该span元素内部而不是附加到它，那么您的播放器会替换 Flash 警告，请执行

    $audioPost.find('#audio_player_'+audioID).replaceWith('<div style=\"background-color:black;">' + data.posts[0]['audio-player'] +'</div>');

    反而。

通过聊天进行一些试验和错误现场测试后编辑的答案；请忽略评论线程。

于 2012-05-03T08:45:33.480 回答