使用jquery和ajax复制聊天室

我正在尝试制作一个程序，当用户从他的朋友列表中单击一个名字时，会弹出一个聊天框，我希望我的聊天框与他单击的用户数量相同。然而，我的问题是，我只能制作一个聊天室，如何才能制作一个多个聊天室并拥有它的唯一ID

以下是我的html和php：

聊天列表：

   <id = "chat_lists">
   //my friend names goes here. 

   //you can ignore this codes, but i'll put this for
     those people who want to see what's happening.

    //selects all the friends of this user

     if($run_query = mysqli_query($con,$query_select))
    {
        while($row = mysqli_fetch_assoc($run_query))
        {
            $chat_name = $row['full_name'];
            $seen = $row['seen'];
            $user_id = $row['users_id'];

            if($seen == 'online')
            {
                $color = "green";
            }
            else
            {
                $color = "gray";
            }
            if($user_id !=$get_user)
            {
                 echo "<div id = $user_id class = 'chat_div'><a class = 'chat_name'>".$chat_name."</a>"."<a class = 'seen' style = 'color:$color'>".$seen."</a></div>".'<br/>';
            }
        }
    }


   </div>

给你： 当然，这只是一个简单的解决方案，但我希望它能帮助您。 每次打开新聊天框时，都会增加

openedcheckbox

隐藏值的值。你也可以使用一个全局变量。然后你可以定位聊天室。将它们添加到

position:absolute

中，并根据打开的复选框计算它们的位置

HTML

<ul>
    <li><a href="#" class="chat_friend" data-id="1">Friend 1</a></li>
    <li><a href="#" class="chat_friend" data-id="2">Friend 2</a></li>
    <li><a href="#" class="chat_friend" data-id="287">Friend 287</a></li>
</ul>
<input type="hidden" name="openedChatBoxes" value="0" />

<div class="chatBoxHolder"></div>

CSS：

<style>
    div.chatBox {width: 150px; height: 300px; border: 1px solid #f00;} 
</style>

div.chatBox{宽度：150px；高度：300px；边框：1px实心#f00；}

以及jQuery：

<script type="text/javascript">

    $(function() {
        $('.chat_friend').click(function(e) {
            e.preventDefault();
            var userId = $(this).data('id');
            var divToShow = '<div class="chatBox" data-id="chat_box_' + userId + '" id="chat_box_' + userId + '"><div>Your chat box code here with user '+ userId + '</div><div><a href="#" class="close">close</a></div></div>';
            $('.chatBoxHolder').append(divToShow);
            /*
             * Here you can do what you want with ajax
             $.ajax({
             url: 'plugins/get_chatmate_id.php',
             data: {id: userId},
             success: function(data) {
             //$('#chat_box_' + userId); //At here, you can access your chat_box like this, but remember, this is a live element, so use 'on' function to manilulate
             var d = $('#message_area');
             d.scrollTop(d.prop("scrollHeight")); // scrolls down the div
             }
             });
             */
        });

        $('.chatBoxHolder').on('click', '.close', function() {
            $(this).closest('.chatBox').remove();
        });
    })
</script>

$（函数（）{
$（'.chat_friend'）。单击（函数（e）{
e、 预防默认值（）；
var userId=$（this.data（'id'）；
var divToShow='您的聊天室代码与用户'+userId+''；
$（'.chatBoxHolder'）.append（divToShow）；
/*
*在这里，您可以使用ajax做您想做的事情
$.ajax({
url:'plugins/get_chatmate_id.php'，
数据：{id:userId}，
成功：功能（数据）{
//$（'#chat_-box_'+userId）；//在这里，您可以像这样访问您的chat_-box，但请记住，这是一个活动元素，因此使用'on'函数进行管理
变量d=$（“#消息区”）；
d、 scrollTop（d.prop（“scrollHeight”）；//向下滚动div
}
});
*/
});
$（'.chatBoxHolder'）。在（'click'，'.close'，函数（）上{
$（this）.closest（'.chatBox'）.remove（）；
});
})

您需要对所有复选框使用唯一id。例如：chat_box_uu[id此处的用户]，然后

$（'#chat_box_uuu'+id）.show（）。在这种情况下，您需要在chat_div.click函数中动态创建聊天框。您根本不需要使用ID。有很多方法可以使用带有遍历和/或索引和/或存储对象引用的公共类来完成所需的操作，但我将使用ajax来访问聊天室，并选择这两个用户之间的所有对话，我将如何识别我所指的聊天室？我明白了，先生，如果我能在我的程序中实现这一点，我将尝试。谢谢：）
<style>
    div.chatBox {width: 150px; height: 300px; border: 1px solid #f00;} 
</style>

<script type="text/javascript">

    $(function() {
        $('.chat_friend').click(function(e) {
            e.preventDefault();
            var userId = $(this).data('id');
            var divToShow = '<div class="chatBox" data-id="chat_box_' + userId + '" id="chat_box_' + userId + '"><div>Your chat box code here with user '+ userId + '</div><div><a href="#" class="close">close</a></div></div>';
            $('.chatBoxHolder').append(divToShow);
            /*
             * Here you can do what you want with ajax
             $.ajax({
             url: 'plugins/get_chatmate_id.php',
             data: {id: userId},
             success: function(data) {
             //$('#chat_box_' + userId); //At here, you can access your chat_box like this, but remember, this is a live element, so use 'on' function to manilulate
             var d = $('#message_area');
             d.scrollTop(d.prop("scrollHeight")); // scrolls down the div
             }
             });
             */
        });

        $('.chatBoxHolder').on('click', '.close', function() {
            $(this).closest('.chatBox').remove();
        });
    })
</script>