Question

我正在尝试从我的数据库加载评论及其回复。

为此，我需要知道在评论之后需要添加哪些回复。

我尝试使用迭代器执行此操作，将i作为id分配给每个新注释，并尝试将所有相应的回复添加到相关的"#"+i可悲的是，这不起作用，因为您可以在输出中看到console.logs：

ITERATOR: 1
ITERATOR: 2
ITERATOR: 3
ITERATOR: 4

ANSWER ITERATOR: 4
ANSWER ITERATOR: 4
ANSWER ITERATOR: 4
ANSWER ITERATOR: 4

所有回复都会在ID为4的评论下添加。

这显然不是预期的。

导致此问题的原因以及如何解决？

（我使用insertAfter($("#"+i));添加回复）

var i = 0;
    var postKey = "<%= post.key %>";
    var commentsRef = firebase.database().ref("comments/"+postKey).orderByChild('commenttimestamp').limitToFirst(25);
    commentsRef.once("value", function(snapshot) {
        snapshot.forEach(function(childSnapshot){
            i++;
            console.log("ITERATOR: "+i);

                $("#commentsBox").prepend("<div class='fullComment' id='"+i+"'><a href='../../users/"+childSnapshot.val().author+"'><div class='userCommentBox'><div class='commentUsername'>"+childSnapshot.val().username+"</div><img class='userPic' src='https://storage.googleapis.com/gaminghub-upload/"+childSnapshot.val().profilepic+"' /></div></a><div class='comment'>"+childSnapshot.val().text+"</div><div><img data-post='"+postKey+"' data-comment='"+childSnapshot.key+"' data-author='"+ childSnapshot.val().author +"' class='commentCross' src='./../../public/assets/cross.png'><img class='replyIcon' data-comment='"+childSnapshot.key+"' data-author='"+ childSnapshot.val().author +"'  src='./../../public/assets/replyIcon.png'></div></div>");
                var that = $(this);
                var answersRef = firebase.database().ref("comments/"+postKey+"/"+childSnapshot.key+"/answers");
                answersRef.orderByChild("answertimestamp").once("value", function(answersSnapshot) {
                    answersSnapshot.forEach(function(answer) {
                        if (answer.val().profilepic == undefined || answer.val().profilepic == null || answer.val().profilepic == "") {
                            $("<div class='answer'><a href='../../users/"+answer.val().author+"'><div class='userCommentBox'><div class='commentUsername'>"+answer.val().username+"</div><img class='userPic' src='../../../public/assets/miniProfilePic.png' /></div></a><div class='comment'>"+answer.val().text+"</div><div><img class='answerCross' data-post='"+postKey+"' data-comment='"+childSnapshot.key+"' data-answer='"+answer.key+"' data-author='"+ childSnapshot.val().author +"' src='./../../public/assets/cross.png'></div></div>").insertAfter($("#"+i));
                        } else {
                            console.log("ANSWER ITERATOR: "+i);
                            $("<div class='answer'><div class='userCommentBox'><a href='../../users/"+answer.val().author+"'><div class='commentUsername'>"+answer.val().username+"</div><img class='userPic' src='https://storage.googleapis.com/gaminghub-upload/"+answer.val().profilepic+"' /></div></a><div class='comment'>"+answer.val().text+"</div><div><img class='answerCross' data-post='"+postKey+"' data-comment='"+childSnapshot.key+"' data-answer='"+answer.key+"' data-author='"+ childSnapshot.val().author +"'  src='./../../public/assets/cross.png'></div></div>").insertAfter($("#"+i));
                        }
                    });
                });
            }

Answer 1

这似乎与@ JavaScript closure inside loops – simple practical example有关，正如@wostex所指出的那样。决议是放在行

之下

var that = $(this);

行

let j=i

然后追加j以

回答迭代器

console.log("ANSWER ITERATOR: "+j);

为什么迭代器总是等于4，我该如何解决这个问题呢？

1 个答案: