Question

大家好我在网上找到了一个代码，我做了一些编辑，但是我无法在同一页面上得到如何让它工作很多次在这里你可以找到我的jsfiddle：http://jsfiddle.net/Scanu/DhpXN/

如果我重复两次（corse）的html代码，它无法正常工作，我可以做些什么来改进代码！？：/ 在此先感谢，抱歉我的英语是意大利语

HTML

<div>
        <input type="button" id="btnAdd" value="add another name" />
        <input type="button" id="btnDel" value="remove name" />
    </div> 
<div class="clonedInput">
        Link: <input type="text" name="link1" />

    </div>
<br><br><br><br>

SCRIPT

$('#btnAdd').click(function() {
    var num = $(".clonedInput").length; // how many "duplicatable" input fields we currently have
    var newNum = new Number(num + 1); // the numeric ID of the new input field being added
    var newElem = $('.clonedInput:last').clone();

    newElem.children(':first').attr('name', 'link' + newNum);
    $('.clonedInput:last').after(newElem);
    $('#btnDel').attr('disabled', false);
    if (newNum == 5) $('#btnAdd').attr('disabled', 'disabled');
});

$('#btnDel').click(function() {
    var num = $('.clonedInput').after().length;
    $('.clonedInput:last').remove(); // remove the last element
    $('#btnAdd').attr('disabled', false); // enable the "add" button
    // if only one element remains, disable the "remove" button
    if (num - 1 == 1) $('#btnDel').attr('disabled', 'disabled');
});

$('#btnDel').attr('disabled', 'disabled');

Answer 1

希望这是你想看到的 http://jsfiddle.net/tonybo/DhpXN/19/

HTML

<table cellpadding="5" border="0">
    <tr>
        <td>
            <div class="clonedInput">
                Link: <input type="text" name="link_1" class="input"/>
            </div>
        </td>
        <td valign="bottom">
            <button id="Add"> + </button>
            <button id="Del"> - </button>
        </td>
    </tr>
    <tr>
        <td>
            <div class="clonedInput">
                Name: <input type="text" name="name_1" class="input"/>
            </div>
        </td>
        <td valign="bottom">
            <button id="Add"> + </button>
            <button id="Del"> - </button>
        </td>
    </tr>
</table>

和JavaScript（这包含在onLoad函数中）

var MAX_ELEMENTS = 5;
$('.clonedInput').each(function (index, element) {
    var $this = $(this);
    var $thisParent = $this.parent();
    var $input = $this.find("input");
    var groupName = $input.attr('name').split('_')[0];

    var $addButton = $thisParent.parent().find("#Add");
    var $delButton = $thisParent.parent().find("#Del");

    $addButton.click(function (e) {
        var newElementIndex = $thisParent.find(".clonedInput").length;
        var $newElement = $thisParent.find(".clonedInput:last").clone();
        $newElement.find('input').attr( 'name', groupName + "_" + newElementIndex);
        $newElement.hide();
        $thisParent.find(".clonedInput:last").after($newElement);
        $newElement.animate({ height: 'toggle', opacity: 'toggle' }, "medium");
        $delButton.fadeIn();
        if ( newElementIndex >= (MAX_ELEMENTS - 1)  )
            $addButton.fadeOut();
    });

    $delButton.click(function (e) {
        var newElementIndex = $thisParent.find(".clonedInput").length;
        $thisParent.find(".clonedInput:last").animate({
            height: 'toggle',
            opacity: 'toggle'
        }, {
            duration : "medium",
            complete : function() {
                $(this).remove();
            }
        });

        if (newElementIndex <= MAX_ELEMENTS )
            $addButton.fadeIn();

        if ( newElementIndex == 1 )
            $delButton.fadeOut();
    });
});

脚本可以多次工作，动态添加字段

1 个答案: