Javascript破坏音频播放器

Question

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

我现在正在使用弹性滑块.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 不够熟悉，所以我真的很难找到解决方案。

Answer 1

查看您的 HTML，结果并不奇怪：您正在使用类 audio 将append()范围限定为元素，这就是<article>。 jQuery将你的新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>');
   

   相反。

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