Question

所以，我有这个HTML

<div id="myFields">
    <fieldset class="newSet">
        <p>
            <label for="item1">Item Name or #</label>
            <input name="item1" type="text" id="item1" size="25" maxlength="15" />
        </p>
    </fieldset>    
    <fieldset class="newSet">
        <p>
            <label for="item2">Item Name or #</label>
            <input name="item2" type="text" id="item2" size="25" maxlength="15" />
        </p>
    </fieldset>    
    <fieldset class="newSet">
        <p>
            <label for="item2">Item Name or #</label>
            <input name="item2" type="text" id="item2" size="25" maxlength="15" />
        </p>
    </fieldset>    
</div>

然后在div myFields之外我有一个图像作为按钮（id =“add”）。单击时，应该出现下一个字段集，我有这个脚本

$(document).ready(function() {
            $(".newSet").hide();

            $("#add").click(function() {

            $(".newSet").next().show("slow");

            });

但它不会只显示下一个，而是一次显示所有这些。

我确信有一种更优雅/更有效的方法，但我找不到它。

感谢您的帮助。

以下是问题的jsFiddle示例：http://jsfiddle.net/XyW4m/

Answer 1

怎么样：

$("#add").click(function() {
    $(".newSet:hidden:first").show("slow");
});

“显示first hidden fieldset。”

工作示例：http://jsfiddle.net/andrewwhitaker/XGDAd/

Answer 2

接下来的是什么？您可以设置单击以这种方式显示第n个字段集，即

$(document).ready(function() {
    $(".newSet").hide();
    $("#add").click(function() {
        $(".newSet:nth-child(1)").show("slow"); //show the first one
    });
});

Answer 3

您不必对FIELDSET元素进行硬编码。您可以在开头只有一个FIELDSET，然后在用户点击“添加”时克隆它。

HTML：

<div id="myFields">
    <fieldset>
        <label>
            Item Name or #
            <input type="text" size="25" maxlength="15">
        </label>            
    </fieldset>
</div>

<button> Add </button>

JavaScript的：

var fields = $('#myFields');

$('button').click(function() {
    fields.children(':first').clone().hide().appendTo(fields).show('slow'); 
});

现场演示： http://jsfiddle.net/rV9Q7/4/

JQuery +逐个显示下一个元素

3 个答案: