Question

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

我实际上在这里有问题： 1.如何更改我的代码以便我可以使用inner-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

您可以删除window ID并将其用作样式类。您可以将对窗口div的引用直接保存到变量中，并在appendTo()中使用它。
检索上一个窗口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);

};

HERE 是代码。

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的位置，以便不重叠它们。这听起来比我想做的更多工作。

用jQuery创建几个div框

3 个答案: