Javascript 始终为Json中的每个对象获取最后一个Id

我的Json在Javascript中有问题。 所以我运行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);

                }       
            }

            });
}

函数generateLast5（）
{
$（“#musicList”）.html（“”）；
console.log（“什么uup”）；
$.ajax({
网址：“…………”，
数据类型：“jsonp”，
成功：函数（json）{
log（json.played_tracks）；
for（我在json.played_曲目中）
{
控制台日志（i）；
oSingle=json.played_曲目[i]；
log（oSingle.youtube_id.default）；
phli=$（“
”）
.附于（“#musicList”）；
$("")
.attr（“src”http://www.youtube.com/embed/“+oSingle.youtube_id.default）
.附录（phli）；
$("")
.attr（“id”、“btnAddToPlaylist”）
.text（“添加到播放列表”）
。单击（函数（）{
log（oSingle.youtube_id.default）；
})
.附录（phli）；
}       
}
});
}

为了提高可读性，您应该将代码拆分

AJAX函数

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

使用适当的循环数组进行循环，并将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);
    } 
}

---

你的代码有很多问题

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

其次，不建议使用for…in循环来迭代数组。相反，使用for循环和数组长度

第三，为全局变量赋值。我建议使用局部变量（例如

var-oSingle

）来避免冲突

现在谈谈你的问题：你总是得到最后一个id，因为这是你用

oSingle.youtube\u id.default

调用的（参见上面关于局部变量的注释）。相反，您可以将id附加到每个按钮：

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

$（“”）
.data（“youtubeId”，oSingle.youtube_id.default）
.text（“添加到播放列表”）
。单击（函数（）{
log（$（this.data（youtubeId））；
})

我会将id作为属性存储在按钮上（或您认为更合适的其他地方），然后在console语句中读取它。1） 把它储存起来。数据（'track-id'，oSingle.youtube_-id.default）2）读取它。console.log（$（this.data（'track-id'））。如果这里有点多余，则必须使用“Don't USE for..in TO ITERATE Array”（不用于迭代数组）。您可能会发现阅读Javascript中的作用域很有趣，这是一个开始；谢谢StreamSide的工作。如果你能把它作为一个答案，我可以奖励它。

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