javascript - 如何在html/css/javascript中动态创建两行正方形

Question

我正在尝试创建 2 行 12 个矩形(被视为一个对象)。

我还想添加一个加号按钮，这样当用户单击任一端时，一组新的矩形会出现在原始矩形的上方或下方。 (取决于他们点击的是哪个加号按钮)。我想我的两个加号按钮都可以使用。

所以我正在努力实现以下目标:

http://i.stack.imgur.com/P26sC.png

到目前为止我做了什么:

https://jsfiddle.net/zp5hnwmx/

 $(function () {
$("body").on('click', ".repeat", function (e) {
    e.preventDefault();
    var $self = $(this);
    var $parent = $self.parent();
    if($self.hasClass("add-bottom")){
      $parent.after($parent.clone());
    } else {
      $parent.before($parent.clone());
    }
});
});

我目前面临着一堆问题:

当我在本地运行我的代码时，矩形没有正确对齐，它们环绕到下一行(我想要 2 行，每行 12 个)。这是我看到的:

http://s16.postimg.org/ro0uzbrdx/Capture.png

创建矩形后，如何单独访问它们？

Answer 1

尝试添加 white-space: nowrap;无论哪个 div 持有你的方形元素。当然，如果页面很小，这会产生一些溢出，需要由带有 overflow: auto; 的父元素处理。或一些这样的声明。

编辑:
至于:

After creating the rectangles, how can I access them individually?

将事件监听器附加到每个方 block 是否效率低下取决于系统的性能要求。关于哪种结构最有效的争论仍在继续。现在，这纯粹是主观的(因为我对你的元素只有有限的看法)，我建议你做进一步的研究......但我会说将一个事件监听器附加到包装你所有方 block 的最直接的父容器将是最好的主意。

由于您可以拥有未知数量的方 block (可能是数百或数千)，因此您不希望将事件监听器附加到每个方 block 。这是一个巨大的重复代码内存池。相反，进行事件监听器委托(delegate)对于内存效率来说会好得多。时间浪费会稍微多一点，但应该是 O(1)，因此可以忽略不计。

总而言之，将一个事件监听器应用于深层父元素(例如 <div class="container"> )可能是最有效的方法。

资源:
https://www.kirupa.com/html5/handling_events_for_many_elements.htm http://davewasmer.com/javascript-event-delegation/