聊天应用程序[关闭]答案

【问题标题】：Chat application [closed]聊天应用程序[关闭]
【发布时间】：2015-11-15 14:57:32
【问题描述】：

我想在点击他的名字（给定的）时打开特定人的 diff div，并且只想要两个人聊天......我无法理解如何在点击他/她的名字时获得 diff div。 ... 如果有人能得到我的代码，请帮忙......`

Check this design try to analyse what i wanna say

【问题讨论】：

你有sn-ps代码吗？如果使用查询作为标签建议您可以使用 $('.user') 并确保 div 有一个以用户命名的类，但是这是在不知道聊天区域是如何制作的情况下的猜想。
等彼得，我很快就会给你发代码...
你是对的彼得，但我的代码有点复杂，我试图从 mysql 获取 id ......基于 id 它将显示登录用户和他的对话消息。 .

【解决方案1】：

我做了一个简单的选择用户示例，其中包含添加测试消息的代码。当您单击用户“content_holder”时，div 会重置并为另一个用户加载新的聊天窗口。当您单击“添加测试消息”按钮时，消息将添加到活动窗口。我想这就是你要找的东西Link to example script

HTML：

<div id='ATM'>Add test message</div>
<div class="container">
    <div class="content_holder"></div>
    <div class="user-list">
        <ul>
            <li class="user" user-id='1'>user 1</li>
            <li class="user" user-id='2'>user 2</li>
            <li class="user" user-id='3'>user 3</li>
        </ul>
    </div>
</div>

JS：

function addMessage(message) {
    $(".conv").append("<div class='message'>"+message+"</div>");
}

function selectUser(userId) {
    $(".content_holder").html("<div class='messages'>conversation with user"+ userId +"<hr><div class='conv'></div></div>")
}

$(".user").click(function(){
    selectUser($(this).attr("user-id"));
});

$("#ATM").click(function(){
    addMessage("testMessage");
});

CSS：

.content_holder {
    width: 300px;
    border: 1px solid #000;
    float: left;
    height: 300px;
}
.user-list {
    float: right;
    margin-left: 10px;
    text-align: left;
    width: 200px;
    cursor: pointer;
}
#ATM {
    border: 1px solid #000;
    cursor: pointer;
}

【讨论】：