Question

我最近开始学习jQuery，我想我爱上了。）

这就是我想要做的......

隐藏所有 li输入字段，第一个除外。在第一个输入字段下方有一个按钮，在单击时显示第二个输入字段。按钮必须移动到新显示的输入字段下方。

再次点击时，必须重复上述内容，直到没有任何输入字段为止。

我尝试了一些想法，最新的想法是here。我知道这是错的，我真的很难受这个问题，非常感谢任何帮助。

以下是“显示额外补充字段”下的temporary solution。

Answer 1

<div id="container">
        <div id="content">

           <h2>Refill Your Prescription(s)</h2>
      <ul id="pofields">

        <li>
            <input name="prescription_1" type="text" size="40">
        </li>

      </ul>

            <input id="add" type="button" value="Refill Another Prescription">

        </div>
</div>

我更改了你的一些id和类的名字，因为你不应该使用大写字母来启动id / class name

$(document).ready(function() {
        $( "#add" ).click(function(){
            //get the name of the next input element
            var name = $('#pofields li').length + 1
            $('#pofields li:last').after('<li><input name="prescription_' + name + '" type="text" size="40"/></li>')
        });

});

Answer 2

为了便于阅读，我简化了您的标记查看工作example here ..

    <input type="text" /> 
    <input class="hide" /> 
    <input class="hide" /> 
    <input class="hide" /> 
    <input class="hide" /> 
<br /><button id="refill">Refill Another</button>
<style>
 .hide{
    display:none;
    visibility:collapse;
 }
 input{
    display:block;
    clear:both;
 }    
</style>

还有一点jQuery .. :)）

$(document).ready(function() {
    $('#refill').click(function(){
        $('input').not(':visible').first().removeClass('hide');
        //thats all you need!
    });    
});

Answer 3

您可以使用容器作为输入字段，因此当您单击按钮时，您只需将另一个文本字段附加到此容器。您可以克隆第一个文本字段，更改其参数，然后将其附加到容器。

<div id="container">
    <input type="text" name="something[]" />
</div>
<input type="button" name="add" />
<script>
    $("input[name=add]").click(function(){
        $("#container").append('<input type="text" name="something[]" />');
    });
</script>

通过单击按钮（jQuery）一次显示一个额外的字段

3 个答案: