Question

我想为每个用户打开一个聊天框。我在代码中有一个div我想为每个用户打开相同的div（很像facebook）当我点击说5个用户时5个聊天框开放但是在这里我我被困在聊天框只对一个用户开放。如果有人知道同样的事情使用Javascript做回应。

这是我的代码

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
    <style>
        body {
            margin:0;
            padding:0;
        }
        #contact {
            position:absolute;
            right:2px;
            bottom:2px;
            width:270px;
            font-size:12px;
        }
        #contact #button {
            position:relative;
            right:0;
            bottom:0;
            padding:0 0 0 200px;
        }
        #contact #button a {
            padding:0 5px;
            text-align:right;
            background:green;
            cursor:pointer;
        }
        #contact form {
            border:1px solid #666;
            background:#dfdfdf;
            padding:10px;
            display:none;
        }
        form label {
            float:left;
            width:40%;
        }
        form input[type=text] {
            float:left;
            width:50%;
        }
        form input[type=text] {
            float:left;
            width:50%;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">

    </script>
    <script>
        function abc() {
            var val = '#Prashant a';
            $(val).on('click', function() {
                $('#contact form').toggle();
            });
        }
    </script>
</head>

<body>
    <div id="contact" style="width: 500px">
        <ul id="button">
            <li style="display: inline-block" id="Prashant" onclick="abc()"> <a>Prashant</a>
            </li>
            <li style="display: inline-block" id="Katrina" onclick="abc()"><a>Katrina</a>
            </li>
            <li style="display: inline-block" id="Priyanka" onclick="abc()"><a>Priyanka</a>
            </li>
            <li style="display: inline-block" id="Kareena" onclick="abc()"><a>Kareena</a>
            </li>
            <li style="display: inline-block" id="Anushka" onclick="abc()"><a>Anushka</a>
            </li>
        </ul>
        <!--<div id="button"><a>Contact Us</a></div>  -->
        <form>
            <div>
                <label for="message">Message<i class="icon-star"></i>
                </label>
                <textarea id="message" name="message" cols="11" rows="11"></textarea>
            </div>
            <div>
                <input id="send" name="send" type="submit" value="Send" />
            </div>
        </form>
    </div>
</body>

Answer 1

好吧，我会关注click事件，然后将新div添加到现有的div中，如下所示：

$('a.user').click(function(){
    var newDiv = '<div></div>';
    $('#contact').append(newDiv);
});

然后它只是造型的问题？

快速而肮脏但你明白了 - http://jsfiddle.net/36pcu/3/

Answer 2

你会从这里得到一个逻辑

将类user添加到联系人列表并从JavaScript调用它。为身体中的每个用户附加表单

$(document).ready(function() {
    $(".user").on('click', function () {
        $("body").append($('#contact form').html());
    });
});



<div id="contact" style="width: 500px">
<ul id="button">
    <li style="display: inline-block" id="Prashant" class="user"> <a>Prashant</a>

    </li>
    <li style="display: inline-block" id="Katrina" class="user"><a>Katrina</a>

    </li>
    <li style="display: inline-block" id="Priyanka" class="user"><a>Priyanka</a>

    </li>
    <li style="display: inline-block" id="Kareena" class="user"><a>Kareena</a>

    </li>
    <li style="display: inline-block" id="Anushka" class="user"><a>Anushka</a>

    </li>
</ul>
<!--<div id="button"><a>Contact Us</a></div>  -->
<form>
    <div>
        <label for="message">Message<i class="icon-star"></i>

        </label>
        <textarea id="message" name="message" cols="11" rows="11"></textarea>
    </div>
    <div>
        <input id="send" name="send" type="submit" value="Send" />
    </div>
</form>

如何使用Jquery多个打开聊天框？

2 个答案: