Question

我有潜水，点击即可显示。当您单击添加人员按钮时，它将克隆并添加.loop div。

我需要的是在循环div（人1）中有一个标题文本，我需要为每个循环更新此文本。例如person1，person 2，person 3 ...

以下是我的代码和 fiddle

$(function () {
    clicks = 0;
    $('div.test').on('click', function () {
        $('.attnd2').show();
        $('div.loop').show();
        if ($('div.loop').length < 5) {
            clicks++;
            if (clicks > 1) {
                newLoopDiv = $($('div.loop')[0]).clone().appendTo(".container");
                $('input', newLoopDiv).each(function (index, element) {
                    $(element).attr('name', $(element).attr('name') + clicks);
                });
            } else {
                newLoopDiv = $($('div.loop')[0]).appendTo(".container");
                $('input', newLoopDiv).each(function (index, element) {
                    $(element).attr('name', $(element).attr('name') + clicks);
                });
            }
        }
        $(".remove").click(function () {
            $(this).closest('.loop').remove();
        });
    });
});

Answer 1

LIVE DEMO

HTML：（请注意#loops，根本没有内容）：

<div class='container' id="loops"></div>
<div class="test">Add person</div>

CSS （需要display:none;无.loop）

<强> JS / JQ：

var c = 0;

function HTMLloop(c) {
    return '<div class="loop">\
              <strong>Person ' + c + '</strong><br/> \
              <input type="text" name="firstName' + c + '"/> \
              <input type="text" name="lastName' + c + '"/> \
              <input type="text" name="mail' + c + '"/> \
              <input type="text" name="company' + c + '"/> \
           </div>';
}

$('.test').on('click', function () {
    if (c<5) $('#loops').append( HTMLloop(++c) );
});

_{...是的，就是这样。}

Answer 2

如果您想更改强名称：

// I prefer this for readability
$(newLoopDiv).find('strong')[0].html( 'Person '+ clicks );
// but this is more dynamic
$(newLoopDiv).find('strong')[0].html( $(element).find('strong')[0].replace("1", clicks) );

要更新所有输入名称（因为这些是错误的，请检查您的来源：

// In your loop with the inputs:
$(element)[0].name = $(element)[0].name.replace("1", clicks);

如果您为输入提供类似数组的名称，则分配更简单：

<input name="example[]" value="this is the first" />
/* then you click */
<input name="example[]" value="this is the 2nd" />
/* then you click */
<input name="example[]" value="this is the 3rd" />

提交后，它将是这样的：

example{
    [0] = "this is the first",
    [1] = "this is the 2nd",
    [2] = "this is the 3rd"
}

可以使用foreach循环访问：

foreach($_POST['example'] as $key =>$value){
    echo $value;
    echo '<br />';
    echo $_POST['otherinputName'][ $key ] ;
}

这有另一个好处，如果你在第二次.remove()时，不需要重新计票。 $ _POST值只是得到一个较小的值，只有'这是第一个'和'这是第三个'，而你没有在你的增量修复中有空白

Answer 3

试试这个：

newLoopDiv = $($('div.loop')[0]).appendTo(".container");
            $(newLoopDiv).children('strong').text("Person "+clicks);//Add this Line
            $('input', newLoopDiv).each(function (index, element) {
                $(element).attr('name', $(element).attr('name') + clicks);                    
            });

工作Fiddle

生成循环和订单号的文本

3 个答案: