Question

我正在尝试在单击“添加”输入时创建输入字段。

使用Jquery创建的输入应该与最近的输入字段相同，但只是将信息添加到名称中。

单击“添加”输入时，文本应更改为“删除输入”，如果单击，则应删除创建的输入字段。

我的HTML：

<div class="input string optional">
<label for="company_count" class="string optional"> count</label>
<input type="text" size="50" name="company[count]" maxlength="255" id="company_count" class="string optional">
<p class="addinput">Add input</p>
</div>

<div class="input string optional">
<label for="company_navn" class="string optional"> Navn</label>
<input type="text" size="50" name="company[navn]" maxlength="255" id="company_navn" class="string optional">
<p class="addinput">Add input</p>
</div>

我的Jquery

    $('.addinput').toggle(function() {


    }
});

更新：输入字段：

<div class="input numeric integer optional"><label for="company_prisar" class="integer optional"> Pris 1. år</label><input type="number" step="1" size="50" name="company[prisar]" id="company_prisar" class="numeric integer optional"></div>

单击添加输入时，将添加此输入：

<input type="number" step="1" size="50" name="company[prisarinfo]" id="company_prisarinfo" class="numeric integer optional">

Answer 1

如果我理解你的问题是正确的，那么这样的事情应该可以解决问题：

$('button.add', '#companyinfo').live('click', function(e) {
    var element = $(this).parents('.input').find('input').last().clone().prop('value','');
    var counter = $(this).parents('.input').find('input').length + 1;
    var newname = element.prop('id') + '_' + counter;
    element.prop('name', newname);
    element.insertAfter($(this).parents('.input').find('input').last());
    $('button.remove').removeProp('disabled');
})
$('button.remove', '#companyinfo').live('click', function(e) {
    $(this).parents('.input').find('input').last().remove('input');
    if ($(this).parents('.input').find('input').length == 1) {
        $(this).parents('.input').find('button.remove').prop('disabled', 'disabled');
    }
});

请注意，我已经修改了一下html，你可以看到working live demo at jsFiddle。

Answer 2

我认为你有一个错字，它应该是：

$('p.addinput').toggle(function(){});

你可以扩展你想要的功能吗？我不清楚。

Jquery帮助创建基于另一个的输入字段

2 个答案: