如何使用Jquery打開多個聊天框？

我想爲每個用戶打開一個聊天框。我在代碼中有一個div我想要爲每個用戶打開相同的div（很像facebook），當我點擊5個用戶時，5個聊天框會打開，但在這裏我是卡住的聊天框只對一個用戶開放。如果有人知道使用Javascript做同樣的事情會做出迴應。如何使用Jquery打開多個聊天框？

這裏是我的代碼

<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>

來源

2014-04-24 TruePS

形式框現在是開放的罰款。檢查這個http://jsfiddle.net/36pcu/ –

@karthik我想要的是表單框打開1爲每個用戶當我點擊卡特里娜1表單框打開時，當我點擊說Prashant另一個表單框打開.Much像Facebook中fb如果您與5個用戶聊天，您已打開5個框。 – TruePS

好，我會看的單擊事件，然後將新的div附加到現有的div像這樣：

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

然後它只是一個造型問題？

快速和骯髒的，但你明白了吧 - http://jsfiddle.net/36pcu/3/

來源

2014-04-24 13:08:58

但事情是，如果你追加divs寫在前面的div文本將消失 – TruePS

http://jsfiddle.net/36pcu/3/下面是一個樣式和狗屎的例子。無法關閉聊天框，但應該很容易實現。 –

可怕的人，但有一個小問題，如果我點擊10次說「約翰」，然後10個div打開我們不能限制div的用戶，以便即使我點擊一個用戶10次相同的div獲取打開並且已經寫入div的內容不會被刪除。 – TruePS

你會得到一個邏輯從這裏

添加類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>

來源

2014-04-24 13:22:58 Salim

如何使用Jquery打開多個聊天框？

回答

相關問題