Question

我正在尝试为聊天应用程序编写代码。我想要的是，当有人输入内容并点击发送时，我想添加一个＆＃39;行＆＃39; （动态地）在名为“聊天”的容器内。＆＃39;行＆＃39;包含另一个名为＆＃39; message＆＃39;的容器中的邮件。（也是动态创建的）。我能够做到这一点。但我想要做的就是这个，当有人连续输入两条消息时（我的意思是在他/她正在聊天的人收到任何回复之前）并点击发送我不想添加整个＆＃39 ;排＆＃39;在＆＃39;聊天＆＃39;。我只是想附加一条消息＆＃39;在行内，类似于：

$('button').on('click', function() {
   if(last added element was .row.user) {
     $('.row').appnd('<div class="message">/div>');
   } else {

   }
});

无论如何要实现我所描述的伪代码吗？

这是HTML

<div class="chat">
    <div class="row">
        <div class="message"></div>
    </div>
</div>

Answer 1

这个怎么样？？

<html>
    <head>
        <style>
        .row{
            border: 1px solid;
            padding: 5px;
            margin: 5px;
        }
        </style>
    </head>
    <body>
        <div class="chat"></div>
        Message: <input type="text" id="message"/>
        <br/><br/>
        <button onclick="sendMessage('userA');">Send Message as User A</button>
        <button onclick="sendMessage('userB');">Send Message as User B</button>
        <script>
            var lastUser = null;
            function sendMessage(user){
                var chat = document.querySelector('.chat');
                var message = document.getElementById('message');
                if(user != lastUser){
                    var newRow = document.createElement('div');
                    newRow.className = 'row';
                    var newMessage = document.createElement('div');
                    newMessage.className = 'message';
                    newMessage.innerHTML = '<strong>' + user + '</strong><br/>';
                    newMessage.innerHTML += message.value;
                    newRow.appendChild(newMessage);
                    chat.appendChild(newRow);
                    lastUser = user;
                }else{
                    var rows = document.querySelectorAll('.chat .row');
                    var lastRow = rows[rows.length - 1];
                    var lastMessage = lastRow.querySelector('.message');
                    lastMessage.innerHTML += '<br/>' + message.value;
                }
                message.value = '';
            }
        </script>
    </body>
</html>

Answer 2

这可以这样做：

function addMessage(message, user) {
    chat = $("#chat"); //Get a reference to the chat div.
    lastRow = chat.find(".row:last"); //Get a reference to the last row of the chat.
    if(lastRow.attr("data-user") == user) {
        //Its the same user who posted last time.
        lastRow.append("<div class='message'>" + message + "</div>");
    }
    else {
        //It's a different user.
        chat.append('<div class="row" data-user="' + user + '"><div class="message">' + message + '</div></div>');
    }
}

Working JSFiddle.

如何检查最后一个动态添加的元素是什么并运行特定功能

2 个答案: