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

名前を強く変更したい場合：

// 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 ] ;
}

これにはもう 1 つの利点.remove()があります。$_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 に答える