Question

我有如下HTML：

NOF:
<input type="text" class="nof" />

<div class="myfld">
</div>

jquery：

html = '';
var html = 'Name : <input type="text" name="ss" />';
var html = html + 'Email : <input type="text" name="email" />';

$('.nof').keyup(function(){
$('.myfld').empty();
    nof = $('.nof').val();
    for(var x = 0;  x < nof; x++) {
        $('.myfld').append(html);
    }
});

当我键入时，它会动态创建输入字段，直到这一点工作得很好。但问题是创建的所有字段都与ss和email具有相同的名称。那么如何将这些名称设为ss1，email1，ss2，email2等等？

DEMO

Answer 1

尝试这样的事情

$('.nof').keyup(function(){
$('.myfld').empty();
    nof = $('.nof').val();
    for(var x = 0;  x < nof; x++) {
        $('.myfld').append('Name : <input type="text" name="ss_'+x+'" />Email : <input type="text" name="email_'+x+'" /><br/>');
    }
});

每当您附加输入时，您也会更改输入的名称，因此对于3个输入，您有类似ss_0 / email_0，ss_1 / email_1，ss_3 / email_3

的内容

Answer 2

您可以在内部移动相应的行以进行循环

var html = ''; 
for (var x...) {
html = 'Name : <input type="text" name="ss' + x + '" />';

同样适用于电子邮件

Answer 3

您可以在每次迭代中替换“Salt”，如下所示：

html = '';
var html = 'Name : <input type="text" name="ssFOO" />';
var html = html + 'Email : <input type="text" name="emailFOO" />';
var html = html + '<br />';

$('.nof').keyup(function(){
$('.myfld').empty();
    nof = $('.nof').val();
    for(var x = 0;  x < nof; x++) {
        var newHtml = html.replace(/FOO/g, String(x));
        $('.myfld').append(newHtml);
    }
});

Demo

Answer 4

你可以查看这个更新的小提琴演示[http://jsfiddle.net/49gJG/7/] Demo

为jquery追加创建的输入创建动态名称

4 个答案: