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

我试图创建2行12行的长方形（被认为是一个对象）。如何在html/css/javascript中动态创建两行正方形

我也想添加一个加号按钮，这样当用户点击任一端时，一组新的矩形出现在原始矩形的上方或下方。（取决于他们点击哪个加号按钮）。我想我已经有两个加号按钮了。

所以我想实现以下目标：

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

我迄今所做的：

$(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()); 
    } 
}); 
});

我目前所面临一堆问题：

当我在本地运行我的代码，矩形没有正确对齐，并绕到下一行（我想要12行2行）。这是我所看到的：

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

创建矩形后，我怎么能单独访问它们？

来源

2016-09-19 blazerix

尝试将white-space: nowrap;添加到任何div正在持有您的方形元素。当然，如果页面很小，这会造成一些溢出，这将需要由一个父元素用overflow: auto;或一些这样的语句来处理。

编辑：
至于：

创建矩形后，我怎么能单独访问它们？

无论是否将事件侦听器附加到每个方块都效率低下，将取决于系统的性能要求。关于哪个是最有效的结构，辩论仍在继续。现在，这完全是主观的（因为我只对你的项目有限的看法），我建议你做进一步的研究......但我会说，附加一个事件监听器到最直接的父容器，包装所有的广场将是最好的主意。

由于您可以有未知数量的正方形（可能为数百或数千），因此您不希望将事件侦听器附加到每个方块。这是一个重复代码的巨大内存接收器。相反，做事件监听器委托对于内存效率会更好。会浪费更多的时间，但它应该是O（1），因此可以忽略不计。

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

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

来源

2016-09-19 21:30:06

我添加它.repeatable，可惜它没有这样做的伎俩 – blazerix

@blazerix我加入修改过的jsfiddle。可重复使用的{white-space：nowrap;}它的工作原理你有没有共享的代码可能与这个CSS有冲突吗 –

Hi Heather，你是对的，这个窍门确实有效！通过访问我的意思是能够单独点击每个方块并有某种事件。例如，如果我添加更多的行的广场，我如何访问特定行中的随机广场？（即正方形的颜色）我想象一下，为每个方块设置一个Listener会效率低下吗？ – blazerix

以下是否对您的css有所帮助？

.repeat { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: nowrap; 
} 
.repeat > * { 
    flex: 0 0 30px; 
}

来源

2016-09-19 21:16:58 k2snowman69

不幸的是，没有做任何事情:( – blazerix

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

回答

相关问题