javascript - 使用前置的动态序列框逻辑

Question

http://jsfiddle.net/2UAqW/4/

    var counter = 1;
$('#add').click(function(){
    var value = ++counter;
    var myHtml = "<div id='boxFirst'>" + value +"</div>";
    $(myHtml).appendTo("#boxFirst");
});

我想实现这样的目标：

Answer 1

这是一个完整的工作示例：

http://jsfiddle.net/DNR7R/

代码 ：

var counter = 1;
$('#add').click(function(){
    var value = ++counter;
    var myHtml = "<div id='box"+value+"' class='box'>" + value +"</div>";
    $(myHtml).insertAfter("#box"+(value - 1));
});

计数器变量未初始化。我更改var value = counter++;为var value = ++counter;以使value变量具有已经增加的值。

ID 已更改为唯一。我连接值以获取 id，如 box1、box2、box3 ......

为了能够让您的 div 随意放置它们，我向它们添加了display: inline-block属性float:left。对于 css，我把它们都放在同一个类上box。

我还删除了#adddiv css 以将其视为其他 div。

Answer 2

试试这个：- http://jsfiddle.net/aidioo7/2UAqW/3/

JS：-

var counter=2;
$('#add').click(function(){
    var value = counter++;
    var myHtml = "<div class='boxFirst'>" + value +"</div>";
    $("#wrap").append(myHtml);
});

HTML:-

<div id="wrap">
    <div class="boxFirst">1</div>

</div>
<div id="add">+</div>

CSS：-

#wrap{
    background-color:#eee;
    width: 200px;
    height 800px;
}

.boxFirst{
    width: 100px;
    height: 100px;
    background-color:blue;
    text-align: center;
    color: #fff;
    position: relative;
    float:left;
}

#add{
      width:40px;
    height: 40px;
    text-align: center;
    color: #fff;  
    background-color:red;
    float: right;
    margin:40px 40px 0  0;
}