Question

我在Javascript中遇到了Json的问题。所以我运行json并获得所有youtube id的列表，现在我显示所有那些youtube视频，然后在它旁边放置一个按钮。现在，如果我点击该按钮，它必须给我一个该视频的YouTube视频ID的控制台日志，但它总是给我最后一个youtube视频ID。任何人都可以帮我解决他的代码，因为我卡住了。

这是我的代码：

function generateLast5()
        {
        $("#musicList").html("");
        console.log("what uuup");
            $.ajax({
            url: ".............",       
            dataType: "jsonp",
            success: function(json){
                console.log(json.played_tracks);

                for(i in json.played_tracks)
                {
                    console.log(i);
                    oSingle = json.played_tracks[i];
                    console.log(oSingle.youtube_ids.default);

                    phli = $("<li/>") 
                        .appendTo("#musicList");

                    $("<iframe/>")
                        .attr("src", "http://www.youtube.com/embed/" + oSingle.youtube_ids.default)
                        .appendTo(phli);

                    $("<button/>")
                    .attr("id","btnAddToPlaylist")
                    .text("Add To Playlist")
                        .click(function() {
                         console.log(oSingle.youtube_ids.default);
                        })
                    .appendTo(phli);

                }       
            }

            });
}

Answer 1

您的代码存在许多问题。

首先，您要创建具有相同ID的多个按钮。 ID应该是唯一的（在您的情况下，它们不是必需的）。

其次，不建议使用for ... in循环来遍历数组。相反，使用for循环和数组长度。

第三，您要为全局变量赋值。我建议使用局部变量（例如var oSingle）来避免冲突。

现在问题：你总是得到最后一个id，因为这是你用oSingle.youtube_ids.default调用的内容（参见上面对局部变量的评论）。相反，您可以将id附加到每个按钮：

$("<button/>")
  .data("youtubeId",oSingle.youtube_ids.default)
  .text("Add To Playlist")
  .click(function() {
    console.log($(this).data(youtubeId));
  })

Answer 2

您应该将代码拆分以提高可读性

AJAX功能

function generateLast5() {
    $("#musicList").html("");
    console.log("what uuup");
    $.ajax({
        url: ".............",
        dataType: "jsonp",
        success: function (json) {
            load(json); // call load function here
        }
    });
}

循环使用适当的Array for循环并将id设置为数据属性

function load(json) {
    console.log(json.played_tracks);
    for ( var i = 0; i < json.played_tracks.length; i++) { // use array loop
        console.log(i);
        oSingle = json.played_tracks[i];
        console.log(oSingle.youtube_ids.default);

        phli = $("<li/>") 
            .appendTo("#musicList");

        $("<iframe/>")
            .attr("src", "http://www.youtube.com/embed/" + oSingle.youtube_ids.default)
            .appendTo(phli);

        $("<button/>")
            .data("id", oSingle.youtube_ids.default) // set id as data attribute
            .addClass('btn') // set class here for delegation reasons instead of id, Id should be unique
            .text("Add To Playlist")
            .appendTo(phli);
    } 
}

单独的点击事件

$('button').on('click', '.btn', function(){
    console.log($(this).data('id'));
});

总是得到Json中每个人的最后一个ID

2 个答案: