jQuery从不同的div点击时附加到div答案

【问题标题】：jQuery append to div on click from the different divjQuery从不同的div点击时附加到div
【发布时间】：2015-04-24 00:22:32
【问题描述】：

我有一个动态插入的在线用户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 都会被多次附加。

谁能帮我用 jQuery 解决这个问题？

链接：fiddle

【问题讨论】：

展示你的 JS 或（事件更好）链接一个小提琴是个好主意。
对小提琴的第二次请求。还提供这个 - 这是您想要实现的目标吗？ jsfiddle.net/pLe01k57
您的解决方案只为点击的用户创建一个 div。我需要能够在 DOM 中附加并保留所有用户的 div。
jsfiddle.net/pLe01k57/1 - 像这样？
@bardzusny 几乎是正确的，但是用户的 div 应该只附加一次 :( 所以假设 Maria 存在，不要再附加了

标签： javascript jquery append

【解决方案1】：

你应该避免以这种方式使用data属性。

Read more about .data() attribute

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');

DEMO (with delete example using .one())

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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()。

【讨论】：

【解决方案4】：

在 cmets 进行简短澄清后，我发布了一个可行的解决方案：

$('.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)，如果没有 - 将其附加到那里。

【讨论】：

【解决方案5】：

这样的事情呢？

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

click 事件是委托的，因为用户可以动态添加到列表中。我还在messageBox 中搜索该用户的现有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();
});

【讨论】：