时间戳

首页 > 解决方案 > 带有 .appendchild() 的 Javascript for 循环正在从 html dom 中的 [object object] 附加最后一个对象的值

javascript - 带有 .appendchild() 的 Javascript for 循环正在从 html dom 中的 [object object] 附加最后一个对象的值

问题描述

$(document).ready(function () {
    GetDetails();
});

function GetDetails() {
    let albumlist = document.getElementById("album-list");



    $.ajax({
        url: '/Store/browseajax',
        type: 'GET',
        data: { id: '@ViewBag.genreid' },
        contentType: 'application/json;charset=utf-8',
        success: function (data) {

            console.log(data);


            for (x in data) {

                    let li = document.createElement("li");
                    console.log(li);
                    let a = document.createElement("a");
                    a.id = "refdetails";
                    a.href = "";


                    let img = document.createElement("img");
                    img.alt = "";
                    img.src = "";
                    img.id = "image";

                    let span = document.createElement("span");
                    span.id = "title";

                    a.appendChild(img);
                    a.appendChild(span);
                    li.appendChild(a);
                    albumlist.appendChild(li);

                    let url = '@Url.Action("Details", "Store")?id=' + data[x].albumid;

                    $('#refdetails').attr("href", url);
                    $('#image').attr("src", data[x].albumarturl);
                    $('#image').attr("alt", data[x].albumtitle);
                    $('#title').text(data[x].albumtitle);                   
            }
        },
        error: function (err) {
            alert(err.statusText);
        }
    });


}

请任何人解释我在哪里做错了。我想在我的数据中显示这两个对象，但它只显示最后一个对象值，尽管它正在适当地运行迭代。

在此处输入图像描述

这张图片显示了我的 console.log 数据

标签： javascriptjqueryjsonajax

解决方案

您好，欢迎来到 SO！

让我尝试通过您的代码提供一些见解...

在这里，您正在创建新的 DOM 元素：

let li = document.createElement("li");
console.log(li);
let a = document.createElement("a");

a.id = "refdetails";
a.href = "";

let img = document.createElement("img");
img.alt = "";
img.src = "";

现在，请注意以下几行。您为元素分配一个唯一的 id，在本例中为“ image ”和“ title ”

img.id = "image";

let span = document.createElement("span");
span.id = "title";

a.appendChild(img);
a.appendChild(span);
li.appendChild(a);
albumlist.appendChild(li);

然后，您尝试为这些元素分配一些值：

$('#refdetails').attr("href", url);
$('#image').attr("src", data[x].albumarturl);
$('#image').attr("alt", data[x].albumtitle);
$('#title').text(data[x].albumtitle);

您正在尝试在每个循环中将完全相同的元素（#image和）附加到 dom。元素应该具有唯一的 id，因此如果您尝试插入具有相同 id 的新节点，则在插入新节点之前将删除前一个节点。#title

如果您想在 DOM 中查看所有专辑标题，您应该在每个循环中将一个新元素附加到 DOM。

你可以玩这个想法：

for (let i = 0; i < data.length; i++){             
    let span = document.createElement("span");
    span.id = "title" + i;

推荐阅读