Javascript打破音频播放器

我在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('
' + data.posts[0]['audio-player'] +'
'); } } }); }); }, 2000); 

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

看看播放器如何添加到post的底部？ 我希望它出现在它所说的位置[需要Flash 9来收听音频。]。 我知道它基本上是什么.append但是我对jquery不够熟悉所以我真的很难找到解决方案。

Answer 1

查看HTML，结果并不令人惊讶：您正在使用类audio append()作用于元素，这就是

。 jQuery将你的新div附加到该范围的末尾 – 这是本文的底部。 您需要更改元素插入的范围

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

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

   由于这会改变其范围，您还必须调整检索postID的行以查找元素层次结构，即

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

   或者

2. 将元素插入适当地限定在播放器元素中，即

    $audioPost.find('.audio-player').append('
   ' + data.posts[0]['audio-player'] +'
   '); 

   如果您宁愿替换该元素中的span而不是追加它，那么您的播放器会替换Flash警告

    $audioPost.find('#audio_player_'+audioID).replaceWith('
   ' + data.posts[0]['audio-player'] +'
   '); 

   代替。

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