jquery - 单击jquery中的元素时增加位置

Question

当我从列表中单击一个元素时，我想制作一个多个 div，并且我想让它的位置从它之前的位置递增，div 应该有一个固定的定位，这是我想要实现的示例输出:

这是我的CSS:

.message_chat
{
    width:300px;
    height:300px;
    position:fixed;
    background:black;
    right:0px;
    bottom:5px;
}

这是我的 jquery:

right = 50;
$('.chat_div').click(function(e) {
    e.preventDefault();
    var id = $(this).attr('id');
    var pop_up = '<div class = "message_chat" id = "'+id+'"></div>';
    right+=50;
    $('#'+id).css('right',right+'px');
    $('.chatBoxHolder').append(pop_up); 
});

这是我在 jsfiddle 中尝试的代码:http://jsfiddle.net/iloveprogramming12/kf0b6bh8/2/

Answer 1

你的意思是像

jQuery(function($) {
  var right = 50;
  $('.chat_div').click(function(e) {
    e.preventDefault();
    var $this = $(this);
    var $popup = $this.data('message-chat');
    //if a popup is there for this friend don't create it again
    if (!$popup) {
      var $popup = $('<div class = "message_chat" id = "chat-' + this.id + '"></div>').css('right', right + 'px').appendTo('.chatBoxHolder');
      $this.data('message-chat', $popup)
      right += 150;
    }
  });
})

.message_chat {
  width: 100px;
  height: 300px;
  position: fixed;
  background: black;
  right: 0px;
  bottom: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li><a href="#" class="chat_div" id="1">Friend 1</a></li>
  <li><a href="#" class="chat_div" id="2">Friend 2</a></li>
  <li><a href="#" class="chat_div" id="3">Friend 3</a></li>
</ul>

<div class="chatBoxHolder"></div>