Question

我正在为社交网络创建一个聊天客户端，我正在构建一个有趣的学习项目。

每次从朋友列表中选择用户时，我都会有一个聊天窗口项目附加到我的文档中。

我想在聊天窗口中绑定两个元素来执行不同的操作，我该如何解决这个问题？目前我正在做以下事情：

// Collapse the current chat window
$('body').on('click', '.title', function(){
    $(this).animate({'margin-top' : '-100px'}, 100);
});

// Close the current chat window
$('body').on('click', '.close', function(){ 
           // get the current chat window
   var window = $(this).getElementById('#chatWindow');
   window.remove();
});

我认为我在为'this'传递的引用有问题，我是javascript的新手，所以请原谅我，如果我的问题太简单了。

感谢您的时间。

注意 - 聊天窗口代码

<div id="chatWindow" class="chat1">
    <div class="title"><span><div id="online"></div>Alex Sims</span><a class="close" href="#">X</a></div>
    <div class="message"><p class="msg1">Hey, are you still stuck?</p></div>
    <div class="text"><input type="text" placeholder="Message..."></div>    
</div>

Answer 1

事件处理程序附件on()的结构为.on( events [, selector ] [, data ], handler(eventObject) )，因此this指的是selector已通过。见api.jquery.com/on。最好在document上附加活动。

$(document).on('click', '.title', function () {
    $(this).animate({
        'margin-top': '-100px'
    }, 100);
}).on('click', '.close', function (e) {
    //this refers to '.close'
    //use `closest()` to travel up the DOM tree until it finds '#chatWindow'
    $(this).closest('#chatWindow').remove();
});

Answer 2

我会说你将所有chatWindow换成像chat-window-wrapper这样的div。

将其应用为

<div id="chat-window-wrapper" class="chat1">
  <div id="chatWindow" class="chat1">
      <div class="title"><span><div id="online"></div>Alex Sims</span><a class="close" href="#">X</a></div>
      <div class="message"><p class="msg1">Hey, are you still stuck?</p></div>
      <div class="text"><input type="text" placeholder="Message..."></div>    
  </div>
</div>

不要在身体上应用事件。但是将它们应用于chat-window-wrapper。有一件事我会提到chat-window-wrapper必须留在页面上，即使其中没有chatWindow。

// Collapse the current chat window
$('chat-window-wrapper').on('click', '.title', function(){
    $(this).animate({'margin-top' : '-100px'}, 100);
    // Or i guess you want to -100PX the whole chat window. for that use the following line
    // $(this).closest('#chatWindow').animate({'margin-top' : '-100px'}, 100);
})
// Close the current chat window
.on('click', '.close', function(){ 
           // get the current chat window
   var window = $(this).closest('#chatWindow').remove();
});

jQuery将当前元素项绑定到整个窗口

2 个答案: