Question

所以我目前正在努力查看p和textarea元素中返回的数据。

这是我正在使用的功能，您可以看到我正在从注释节点接收每个键，并获取注释标题和消息，并且可以正常工作...

function loadComments() {
    var comments =
        firebase.database().ref('/comments').once('value', function(snapshot) {
            snapshot.forEach(function(data) {
                var childData = data.val();
                var childKey = data.key;
                console.log(childData.title + " " + childData.message);
                Elements.commentTitle.text(childData.title);
                Elements.commentMessage.text(childData.message);

                var clonedNode = $('.listItems:last').clone();
                $(clonedNode).insertAfter('.listItems:last');
                $(clonedNode).css({
                    display: "block"
                });
            });
        });
}

但是，当我尝试查看2个元素中的数据时，它将仅显示第一个节点的标题和消息，并且根据发送的评论数重复显示。

例如，如果说有5条评论，所有评论都具有不同的数据，那么标题和消息是不同的。这就是您将会看到的...

 Title
  Message

 Title
  Message

 Title
  Message

 Title
  Message

 Title
  Message

以防万一，这是我正在使用的html代码。...

<div class="container listItems text-left w-75 justify-content-center" style="display: none">
        <p class="titleBody"><strong></strong></p>
        <ul><p class="commentBody"></p></ul>
</div>

Answer 1

问题是您克隆了现有元素。您应该在克隆元素后立即替换数据。

下面的代码可解决您抱怨的问题。

function loadComments() {
    var comments =
        firebase.database().ref('/comments').once('value', function(snapshot) {
            snapshot.forEach(function(data) {
                var childData = data.val();
                var childKey = data.key;

                var clonedNode = $('.listItems:first-child').clone();
                clonedNode.find('.titleBody:first-child > strong:first-child').text(childData.title);
                clonedNode.find('.commentBody:first-child').text(childData.message);
                clonedNode.insertAfter('.listItems:last-child');
                clonedNode.css({
                    display: "block"
                });
            });
        });
}

数据正确返回，但不能正确显示返回的数据？

1 个答案: