jQuery在從不同div單擊時追加到div

Question

我有一個動態插入的在線用戶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>

然后我有一個私人消息的div ：

<div id="messageBox">
</div>

現在，我正在努力在單擊用戶時如何在messageBox動態附加div 。

我需要的是以下內容：

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

無論我嘗試了什么， messageBox內的div messageBox被追加多次。

有人可以幫我用jQuery解決這個問題嗎？

鏈接： 小提琴

Answer 1

那這樣的東西呢？

http://jsfiddle.net/thetimbanks/hfuurcL7/

由於可以將用戶動態添加到列表中，因此委托click事件。 我還搜索messageBox中該用戶的現有div ，以便不添加另一個div 。

在此處添加代碼，不僅可以鏈接到小提琴：

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

$("#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();
});

Answer 2

在評論中簡短澄清后，我發布了一個可行的解決方案：

$('.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/

基本上：檢查#messageBox已經與點擊的用戶進行了對話（ div ），如果沒有，請在#messageBox對話后追加（ div ）。

Answer 3

這個怎么樣？

$('.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/

基本上是bardzusny的解決方案，加上一個$（this）.unbind（）。

Answer 4

您應該避免以這種方式使用data屬性。

閱讀有關.data()屬性的更多信息

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>

腳本：

$("#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>");
    }
});

DEMO

---

或者 ，您可以只使用.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');

演示 （使用.one()刪除示例）

Answer 5

希望它能達到您的期望。可以在附加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>