[英]jQuery append to div on click from the different div
I have a div
of online users which are dynamically inserted: 我有一个动态插入的在线用户div
:
<div id="users">
<div class="privateMessage" data="John">John</div>
<div class="privateMessage" data="Maria">Maria</div>
<div class="privateMessage" data="Tony">Tony</div>
</div>
Then I have a div
for private messages: 然后我有一个私人消息的div
:
<div id="messageBox">
</div>
Now, I'm struggling how to dynamically append a div
inside the messageBox
when I click on the user. 现在,我正在努力在单击用户时如何在messageBox
动态附加div
。
What I need is this below: 我需要的是以下内容:
<div id="messageBox">
//when I click on John from users div this below should be appended
<div class="private-chat" data-conversation-between="John"></div>
//when I click on Maria from users div this below should be appended and John above
//will be hidden
<div class="private-chat" data-conversation-between="Maria"></div>
//when I click on Tony from users div this below should be appended and John and Maria
//will be hidden
<div class="private-chat" data-conversation-between="Tony"></div>
</div>
Whatever I tried, the divs inside messageBox
get appended more than once. 无论我尝试了什么, messageBox
内的div messageBox
被追加多次。
Can someone help me to solve this with jQuery please? 有人可以帮我用jQuery解决这个问题吗?
What about something like this? 那这样的东西呢?
http://jsfiddle.net/thetimbanks/hfuurcL7/ http://jsfiddle.net/thetimbanks/hfuurcL7/
The click
event is delegated since the users can be added to the list dynamically. 由于可以将用户动态添加到列表中,因此委托click
事件。 I also search the messageBox
for an existing div
for that user in order to not add another one. 我还搜索messageBox
中该用户的现有div
,以便不添加另一个div
。
Adding code here as to not just link to fiddle: 在此处添加代码,不仅可以链接到小提琴:
HTML HTML
<div id="users">
<div class="privateMessage" data-user="John">John</div>
<div class="privateMessage" data-user="Maria">Maria</div>
<div class="privateMessage" data-user="Tony">Tony</div>
</div>
<div id="messageBox">
</div>
js JS
$("#users").on("click", ".privateMessage", function() {
var user = $(this),
private_chat = $("#messageBox .private-chat[data-conversation-between='" + user.data("user") + "']");
if (private_chat.length == 0) {
private_chat = $('<div class="private-chat" data-conversation-between="' + user.data("user") + '">Chat with ' + user.data("user") + '</div>');
$("#messageBox").append(private_chat);
}
private_chat.show().siblings().hide();
});
After short clarification in the comments, I'm posting a working solution: 在评论中简短澄清后,我发布了一个可行的解决方案:
$('.privateMessage').on('click', function (e) {
$messageBox = $('#messageBox');
var whoIsIt = $(this).attr('data');
var isAlreadyThere = $messageBox.find('div[data-conversation-between="' + whoIsIt + '"]').length;
if (isAlreadyThere == 0) {
$messageBox.append('<div class="private-chat" data-conversation-between="' + whoIsIt + '"></div>');
}
});
jsfiddle: http://jsfiddle.net/pLe01k57/2/ jsfiddle: http : //jsfiddle.net/pLe01k57/2/
Basically: check if #messageBox
already has conversation ( div
) with clicked-on user, and if not - append it there. 基本上:检查#messageBox
已经与点击的用户进行了对话( div
),如果没有,请在#messageBox
对话后追加( div
)。
How about this? 这个怎么样?
$('.privateMessage').on('click', function (e) {
var whoIsIt = $(this).attr('data');
$('#messageBox').append('<div class="private-chat" data-conversation-between="' + whoIsIt + '"></div>');
$(this).unbind();
});
https://jsfiddle.net/lemoncurry/5cq2sw8m/1/ https://jsfiddle.net/lemoncurry/5cq2sw8m/1/
Basically bardzusny's solution above plus a $(this).unbind(). 基本上是bardzusny的解决方案,加上一个$(this).unbind()。
You should avoid using data
attribute in this way. 您应该避免以这种方式使用data
属性。
Read more about .data()
attribute 阅读有关.data()
属性的更多信息
HTML: HTML:
<div id="users">
<div class="privateMessage" data-selected="" data-who="John">John</div>
<div class="privateMessage" data-selected="" data-who="Maria">Maria</div>
<div class="privateMessage" data-selected="" data-who="Tony">Tony</div>
</div>
<div id="messageBox"></div>
Script: 脚本:
$("#users").on("click", '.privateMessage', function () {
if(!$(this).data('selected')){
$(this).data('selected', 'selected');
// do not use '.attr()', use natvie jQuery '.data()'
var $msgTo = $(this).data('who');
$("#messageBox").append("<div class='private-chat' data-conversation-between=" + $msgTo + ">"+$msgTo+"</div>");
}
});
Alternatively , you could just use .one()
event, and reactivate it later for specific button (f.ex. after the person was removed from the chat): 或者 ,您可以只使用.one()
事件,然后稍后将其重新激活以用于特定按钮(例如,从聊天室中删除此人之后):
function singleClick(el) {
$(el).one("click", function () {
var $msgTo = $(this).data('who');
$("<div class='private-chat' data-conversation-between=" + $msgTo + ">"+$msgTo+"</div>").appendTo("#messageBox");
});
}
singleClick('.privateMessage');
Hope it does what you are expecting .Can check data-attribute before appending div's. 希望它能达到您的期望。可以在附加div之前检查数据属性。
$('.privateMessage').on('click', function(e) { var isPresent = false; var whoIsIt = $(this).attr('data'); $('#messageBox .private-chat').each(function(index, element) { if ($(this).attr('data-conversation-between') == whoIsIt) { isPresent = true; } }); if (!isPresent) { $('#messageBox').append('<div class="private-chat" data-conversation-between="' + whoIsIt + '"></div>'); } });
.private-chat { height: 20px; background: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="users"> <div class="privateMessage" data="John">John</div> <div class="privateMessage" data="Maria">Maria</div> <div class="privateMessage" data="Tony">Tony</div> </div> <div id="messageBox"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.