仅在提交的表单上添加 div

Question

您好，我正在 nodejs 中制作应用程序。想法是一个人可以提出问题，其他人可以回答。我已经提出了一个问题部分，但只回复和显示 1 个问题的回复让我很困扰这个代码

function displayMsg(data){
            console.log(data);
            var name = data.name
            var msg = data.msg
            var id = data._id
    
            $messages.prepend("<div class='bubble'><strong>" + name + " says: " + "</strong>" + "<br/>" + msg + "<form id=" + id + " class='form-inline'><div class='form-group'><input type='text' class='form-control' id='reply" + id +"'></div><button type='submit' class='btn btn-default'>Reply</button></form><div id='replies" + id +"'></div></div>");       
        }

所以这个函数显示了一个新问题，我添加了一个回复表单。我为每个表单提供了提交问题的 ID，因此每个表单都有一个唯一的 ID。回复的输入字段和我想要添加回复的回复 div 也是如此。

现在我能够建立一个回复系统，但回复显示在每个问题下方。

我希望只在他们回复的问题下方显示回复

你可以在这个小提琴中看到我完整的 javascript(jquery) 代码。显然不行，因为它是 Jade 和 node + socketio https://jsfiddle.net/bvLnLkwL/3/

Answer 1

我不是您使用的特定技术的专家，但乍一看，我会说问题在于您的听众都在收听相同的全局 new reply 事件，而没有确定是否回复与他们的特定问题 ID 相关。

除非这是 SocketIO 自己处理的事情，否则您可能希望为每个表单创建不同的回复通道来侦听，或者检查侦听器中的问题 ID。

例如，发送带有数据的 ID：

socket.on('new_reply', function(data){
    if(data.question === id) {
        $repliesDiv.prepend("<div id='areply'>"+data.reply+"</div>");
        $('#areply').addClass("fadeInTop");
    }
});

或制作独特的“频道”，如下所示：

socket.on('new_reply.' + id, function(data){
    $repliesDiv.prepend("<div id='areply'>"+data.reply+"</div>");
    $('#areply').addClass("fadeInTop");
});

我不确定最后一个是否/如何影响性能。