由ajax隐藏和显示

时间:2012-07-06 20:02:39

标签: javascript jquery

我的代码是html

<div id="a1"><input type="text" id="ac1" /></div>
<div id="a2" style="display:none"><input type="text" id="ac2" /></div>
<div id="a3" style="display:none"><input type="text" id="ac3" /></div>
<div id="a4" style="display:none"><input type="text" id="ac4" /></div>
<div id="a5" style="display:none"><input type="text" id="ac5" /></div>
<div id="a6" style="display:none"><input type="text" id="ac6" /></div><span id="close" style="display:none">X</span>
<div><input type="button" id="add" value="add" /></div>

此代码由javascript

var i = 2;
$(document).ready(function(){
    $("#add").click(function(){
    if(i <= 6){
        $("#a"+i).show(500);
        ++i;
        if (i == 7){ $(this).hide(500); }
        if (i >= 2){ $("#close").show(500); }
    }
    });

    $("#close").click(function(){
        --i;
        $("#a"+i).hide(500);
        $("#ac"+i).val("");
        if (i == 2){ $(this).hide(500); }
        if (i == 6){ $("#add").show(500); }
    });
});

我需要点击添加按钮我需要隐藏最后一个并在其上面添加新的

1 个答案:

答案 0 :(得分:0)

我认为您可以简单地颠倒html输入的顺序

<div id="a6" style="display:none"><input type="text" id="ac6" />
<div id="a5" style="display:none"><input type="text" id="ac5" /></div>

a4
a3
a2
a1