Создайте несколько блоков div с помощью jQuery

Question

Я хочу иметь возможность создавать подобные окна окна, нажимая на значок.Если я создал один и снова нажму, будет создан другой и так далее.С моим кодом я могу создать несколько блоков, но inner-div создается только в первом открытом окне.Причина этого заключается в том, что если создано несколько блоков, у div будут идентификаторы, что, конечно, не является правильным способом сделать это.

У меня фактически есть вопросы здесь: 1. Как я могу изменитьмой код, чтобы я мог создать несколько ящиков с внутренними делителями?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 и использовать его в качестве класса для оформления.Вы можете сохранить ссылку на окно 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

(1) Вы, вероятно, должны удалить атрибут ID.Если вам нужно как-то ссылаться на идентификатор, сгенерируйте его с нуля, а не используйте жестко закодированные значения, выполнив что-то вроде этого:

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

(2) Конечно, самым простым решением было бы расположитьDIVS абсолютно (position:absolute) и отслеживать, где расположены другие DIV, чтобы не перекрывать их.Это звучит как большая работа, чем я хотел бы сделать.

Answer 3

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