Question

嘿家伙最后一篇文章到我的jquery / javascript聊天框如果克隆我的聊天就停止了工作用javascript。

这是我的javascript代码，用于克隆和更改几个div的id。

例如，它会更改ch，聊天和聊天室ID /类。

例如

<div class="chat" id="chat">
<div id="ch" class="ch">
               <h2>Chat</h2></div>
               <div class="chatbox" id="chatbox">
               <div class="messages"></div>
               <textarea id="message" class="chatinp" 
               rows="3" cols="27"></textarea>
               <button class="send">Send</button></div>
</div>

每次克隆它都会改变聊天，聊天和聊天箱的ID，但保持原来的相同

像这样......

clone1

    <div class="chat" id="chat1">
    <div id="ch1" class="ch">
                   <h2>Chat</h2></div>
                   <div class="chatbox" id="chatbox1">
                   <div class="messages"></div>
                   <textarea id="message" class="chatinp" 
                   rows="3" cols="27"></textarea>
                   <button class="send">Send</button></div>

</div>

Clone2

<div class="chat" id="chat2">
<div id="ch2" class="ch">
               <h2>Chat</h2></div>
               <div class="chatbox" id="chatbox2">
               <div class="messages"></div>
               <textarea id="message" class="chatinp" 
               rows="3" cols="27"></textarea>
               <button class="send">Send</button></div>
</div>

var num = new Number();
num = 0



function chat(){
if(!document.getElementById("chat")){
var chatdiv = document.createElement('div');
  chatdiv.id = 'chat';
  chatdiv.className = 'chat';
  chatdiv.innerHTML = 
              ['<div id="ch" class="ch">',
               '<h2>Chat</h2></div>',
               '<div class="chatbox" id="chatbox">',
               '<div class="messages"></div>',
               '<textarea id="message" class="chatinp" ',
               'rows="3" cols="27"></textarea>',
               '<button class="send">Send</button></div>'
              ].join(' ')
  document.body.appendChild(chatdiv); 

} 
else 
{
var obj  = document.getElementById("chat").cloneNode(true),
      children = obj.childNodes;
  num += 1;
//change the id of the cloned element
  obj.id = obj.id+num;

  //traverse the child nodes of obj to
  //change id (call function changeId)
  if (num<16){
      changeId(children,num);
  }

  //now appending obj to the document.body should be sufficient
var p = $(".chat");
var offset = p.offset();
var left = offset.left + 261;
//now appending obj to the document.body should be sufficient
document.body.appendChild(obj);
document.getElementById("chat").style.left = left + "px";

  //demonstrate that the id value has changed
  var nwchatbox = document.getElementById('chatbox'+num)
  nwchatbox.value = 'my id = '+nwchatbox.id;

  //function to add number to id's of a nodelist (recursive)
  //used in the above 
  function changeId(nodes, n){
   for (var i=0;i<nodes.length;i=i+1){
     if (nodes[i].childNodes){
           changeId(nodes[i].childNodes,n);
     }
     //if id value is 'ch' or 'chatbox', change it
     if(nodes[i].id && /^ch$|^chatbox$/i.test(nodes[i].id)) {
      nodes[i].id += String(n);
     }
   }
  }
}
}

好的我的问题是我如何滑动聊天框个性每次我克隆一个聊天框，它改变了添加一个实例到jquery所以它将打开克隆？

好的，你按下“ch”id / class打开聊天框，然后按下聊天室类/ id。但请记住每次我克隆它，它会改变“ch”div的id

感谢您的帮助

Answer 1

在克隆聊天框后，您需要注册另一个点击处理程序： $('#ch'+num).click(clickHandler)

您需要使clickHandler通用。所以处理程序看起来像：

function clickHandler(e){
    var id = this.id.substring(2);
    //Now initiate sliding behavior
    $("#chatbox"+id).slideToggle(...);
}

帮助jquery底部聊天栏

1 个答案: