Question

我正在使用.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的用法。

Answer 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'
            }));
        }
    });
});

Answer 2

$('audio').append

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

为您的audio元素提供唯一ID以解决此问题。

.ajax - 附加的成功数据被复制

2 个答案: