javascript - 仅在提交的表单上添加一个 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 也是如此。

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

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

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

Answer 1

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

除非这是 SocketIO 自行处理的事情，否则您可能想要创建不同的回复 channel 来监听每个表单，或者检查监听器中的问题 ID。

例如，发送包含数据的 ID:

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

或者创建独特的“ channel ”，如下所示:

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

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