0

.ajax を使用してデータを取得し、そのデータを html 要素に追加しています。現在、2 つの音声投稿とデータが取得されています。しかし、何が起こっているのか、以下のコードのメソッドは、両方の投稿からの投稿データをそれぞれに追加しています。たとえば、投稿 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 ) で要素を表示すると、各投稿には 2 つのタグが<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 Translation: 「 DOM 内のすべての audio要素を見つけて、この要素を追加します。

audioこの問題を解決するには、要素に一意の ID を付けてください。

于 2013-04-02T19:58:03.787 に答える