Javascript:for 循环没有按预期工作

Question

我目前正在尝试设置一个循环，使用 piexifjs 从图像返回 exif 数据。 .

到目前为止，piexif 开发人员提供的代码在我的 Vue.js environment 中运行正常。 .

用于在控制台中显示 exif 数据的循环如下所示:

for (let ifd in exifObj) {
    if (ifd == "thumbnail") {
        continue;
    }
    console.log("-" + ifd);
    for (let tag in exifObj[ifd]) {
        console.log("  " + piexif.TAGS[ifd][tag]["name"] + ":" + exifObj[ifd][tag]);
    }
}

工作正常，但如果我尝试编辑它以返回 HTML 并在我的网站上显示 exif 信息，它只会返回一行信息。这是代码:

for (let ifd in exifObj) {
    if (ifd === "thumbnail") {
        continue;
    }
    const   exifInfo = $(".modal-exif"),
            exifInfoDetail = $(".modal-exif-detail");
    exifInfo.html("» " + ifd);
    for (let tag in exifObj[ifd]) {
        exifInfoDetail.html("<li>" + piexif.TAGS[ifd][tag]["name"] + ":" + exifObj[ifd][tag] + "</li>");
    }
}

我想我的循环在它只返回一个值的地方覆盖了自己，我想这在控制台内没问题，但在 HTML 内不行？

有人知道如何更改循环以为每个条目返回一行吗？

谢谢你:)

Answer 1

在console.log在这种情况下，每次迭代都会写入控制台，而在 $(selector).html() 中在这种情况下，您每次迭代都会覆盖 html 内容。 jquery html 函数声明:

Set the HTML contents of each element in the set of matched elements.

也就是说每次迭代，$(".modal-exif-detail")的html内容设置为单个 "<li>" + piexif.TAGS[ifd][tag]["name"] + ":" + exifObj[ifd][tag] + "</li>" .

你需要使用类似 append 的东西如果你想不断地添加到一个节点，或者建立 html 字符串并且只执行一个 html循环后