使用 jQuery 创建多个 div 框

Question

我希望能够通过单击图标来创建类似窗口的框。如果我已经创建了一个并再次单击，则会创建另一个，依此类推。使用我的代码，我可以创建多个框，但内部 div 只能在第一个打开的窗口中创建。这样做的原因是，如果创建了多个盒子，则 div 将具有 id，这当然不是正确的方法。

我实际上有疑问在这里： 1. 如何更改代码以便可以创建多个带有内部 div 的框？ 2. 如果我想要一个创建的框与上次创建的框重叠，但向右移动 10 像素，向下移动 10 像素，最好的方法是什么？

谢谢！

代码：

PROGRAM.popup = function(width, height){
    this.width = width;
    this.height = height;
}

PROGRAM.popup.prototype.buildPopup = function(){

$('<div/>', {
    id: 'window',
    width: this.width,
    height: this.height,
}).appendTo('#container');

$('<div/>', {
    id: 'windowTop',
    width: this.width,
}).appendTo('#window');
}

...

var popup = new PROGRAM.popup(300, 300);
popup.buildWindow();

var popup2 = new PROGRAM.popup(300, 300);
popup2.buildWindow();

Answer 1

1. 您可以删除window ID 并将其用作样式的类。您可以将对窗口 div 的引用直接保存到变量中，并在 appendTo() 中使用它。

2. 检索上一个窗口 div 并使用 offset() 获取其位置。然后根据这些值设置自己的偏移量。

JavaScript：

PROGRAM.popup = function(width, height){
    this.width = width;
    this.height = height;
};

PROGRAM.popup.prototype.buildPopup = function(){

  // save reference to the created div
  // this way we don't have to look for it in DOM
  var win = $('<div/>', {
    'class': 'window',
    'width': this.width,
    'height': this.height
  }).appendTo('#container');

  // try to retrieve previous closest sibling with class "window"
  var prev = win.prev('.window');
  // if it exists then get his position and set our based on it
  if (prev.length) {
    win.offset({ 
      left: prev.offset().left + 10, 
      top:  prev.offset().top + 10 });
  }

  // nothing changed here
  $('<div/>', {
    'class': 'inner',
    'width': this.width
  }).appendTo(win);

};   

此处是代码。

Answer 2

（2）我会这样做：

.mybox{
   padding-top: 10px;
   padding-left: 10px;
}
<script>
    var myHtml = '<div class="mybox"><a class="iconAction">icon</a></div>";
    $('body').append(myHtml);
    $('body').on('click', 'a.iconAction',function(event){
       $(this).parent().append(myHtml)
    })
</script>

Answer 3

(1) 您或许应该删除 ID 属性。如果您需要以某种方式引用 ID，请从头开始生成它，而不是通过执行以下操作来使用硬编码值：

function generateId(){
    var count = 0;
    while(document.getElementById(id = 'anonymous_element_' + (count++))){}
    return id;
}

(2) 当然，最简单的解决方案是绝对定位 div (position:absolute）并跟踪其他 div 的位置，以免与它们重叠。不过，这听起来比我想做的还要多。