0

我正在使用 .ajax 获取一些数据，然后将数据附加到 html 元素。现在，有两个音频帖子和数据正在被检索。但是发生了什么，下面代码中的方法是将两个帖子中的帖子数据附加到每个帖子中。比如说，帖子 A 有来自帖子 A 和 B 的数据。帖子 B 有来自帖子 A 和 B 的数据。我在导致这种情况的代码中遗漏了什么？

$('.audio.post').each(function() {
    var audiopostID = $(this).attr('data-postID');

    $(this).find('.standard-player').hide();

    var audioPath = '/api/read/json?id=' + audiopostID;

    $.ajax({
        url: audioPath,
        dataType: 'jsonp',
        timeout: 5000,
        success: function(data) {
            audioSrc = data.posts[0]['audio-player'];
            audioURL = decodeURIComponent(/audio_file=(.*)&color/.exec(audioSrc)[1]);
            //console.log(audioURL);

            $('.custom-player').append('<audio preload="none" controls>');
            $('audio').append($('<source>').attr({
                src: audioURL,
                type: 'audio/mpeg'
            }));
        }
    });
});

在控制台 ( http://cl.ly/O0pk ) 中查看元素时，每个帖子都有两个标签，<audio>第一个<audio>标签有两个<source>标签。对于这里的松鼠描述，我深表歉意。只是想更好地理解 .ajax 的用法。

4

2 回答 2

1

如果你不想给他们一个 id，你可以跟踪当前的音频：

$('.audio.post').each(function() {
    var audiopostID = $(this).attr('data-postID');
    var $thatAudio = $(this).closest('audio'); // Or however you can navigate to it

    $(this).find('.standard-player').hide();

    var audioPath = '/api/read/json?id=' + audiopostID;

    $.ajax({
        url: audioPath,
        dataType: 'jsonp',
        timeout: 5000,
        success: function(data) {
            audioSrc = data.posts[0]['audio-player'];
            audioURL = decodeURIComponent(/audio_file=(.*)&color/.exec(audioSrc)[1]);
            //console.log(audioURL);

            $('.custom-player').append('<audio preload="none" controls>');
            $thatAudio.append($('<source>').attr({
                src: audioURL,
                type: 'audio/mpeg'
            }));
        }
    });
});
于 2013-04-02T20:01:07.520 回答
0

$('audio').append

jQuery 翻译：“我将在 DOM 中查找所有 audio元素并将这些内容附加到它们。

给你的audio元素一个唯一的 ID 来解决这个问题。

于 2013-04-02T19:58:03.787 回答