2

我有一个潜水，点击时会显示出来。当您单击添加人员按钮时，它会克隆并添加 .loop div。

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

这是我的代码和小提琴

$(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();
        });
    });
});
4

3 回答 3

3

现场演示

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) );
});

...是的，就是这样。

于 2013-08-27T07:42:07.960 回答
0

如果你想在strong中更改名称：

// 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()第 2 次，则不需要重新计算。$_POST 值只是得到一个更少的值，只有“这是第一个”和“这是第 3 个”，而您的增量中没有要修复的差距

于 2013-08-27T07:30:55.807 回答
0

尝试这个：

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);                    
            });

工作小提琴

于 2013-08-27T07:44:10.467 回答