Question

您好我正在制作聊天应用程序，因此每当我点击在线用户时，聊天框应该打开，类似地，当我点击其他用户时，应该打开多个聊天框。每次用户点击在线用户时，我都会附加div。我正面临一些css的问题。这是因为我为每个新的聊天框使用相同的CSS。这是我动态添加聊天箱的代码。

$(".shout_msg").click(function(){

            var id = $(this).attr('id');
            var name = $(this).text();
            alert("name is "+ name + "id is " +id);

            $('body').append("<div class = 'shout_box'></div>");
            $(".shout_box").append("<div class = 'header'>'"+name+"'</div>");
            $(".header").append("<div class='close_btn'>&nbsp;</div>")
            $(".shout_box").append("<div class = 'toggle_chat'></div>");
            $(".toggle_chat").append("<div class = 'message_box'></div>");
            $(".toggle_chat").append("<div class = 'user_info'></div>");
            $(".user_info").append('<input name = "shout_message" id = "shout_message" type = "text" placeholder = "Type Message Hit Enter" />');
        })

shout_msg是一个显示单个在线用户的段落。

这是我的css

<style type="text/css">
        .shout_box {
                background:#627BAE; width:260px; overflow:hidden;
                position:fixed; bottom:0; right:20%; z-index:9;
        }

        .shout_box .header .close_btn {
            background: url(close_icon.png) no-repeat 0px 0px;
            float:right; width:15px;
            height: 15px;
        }
        .shout_box .header .close_btn:hover {
            background: url(images/close_btn.png) no-repeat 0px -16px;
        }
        .shout_box .header .open_btn {
            background: url(images/close_btn.png) no-repeat 0px -32px;
            float:right; width:15px;
            height:15px;
        }
        .shout_box .header .open_btn:hover {
            background: url(images/close_btn.png) no-repeat 0px -48px;
        }
        .shout_box .header{
            padding: 5px 3px 5px 5px;
            font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
            font-weight: bold; color:#fff;
            border: 1px solid rgba(0, 39, 121, .76);
            border-bottom:none; cursor:pointer;
        }
        .shout_box .header:hover{
            background-color: #627BAE;
        }
        .shout_box .message_box {
            background: #FFFFFF; height: 200px;
            overflow:auto; border: 1px solid #CCC;
        }
        .shout_msg{
            margin-bottom: 10px; display: block;
            border-bottom: 1px solid #F3F3F3; padding: 0px 5px 5px 5px;
            font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif; color:#7C7C7C;
        }
        .message_box:last-child { 
            border-bottom:none;
        }
        .time{
            font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
            font-weight: normal; float:right; color: #D5D5D5;
        }
        .shout_msg .username{
            margin-bottom: 10px;margin-top: 10px;
        }
        .user_info input {
            width: 98%; height: 25px; border: 1px solid #CCC; border-top: none; padding: 3px 0px 0px 3px;
            font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
        }
        .shout_msg .username{
            font-weight: bold; display: block;
        }

        .userdisplay{           
            width: auto;
            height: 30px;
            border-radius: 10px;
            background-color: #627BAE;

        }

        .userdisplay p{
            width: auto;
            //background-color: yellow;
            padding : 10px;
        }

        .userdisplay a{
            float : right;
        }

    </style>

将相同的css添加到动态添加的元素中

0 个答案: