2

次のような入力フィールドを持つフォームを作成しています。

<label>First Name<input type="text" id="firstname1" name="firstname1"></label>
<label>Last Name<input type="text" id="lastname1" name="lastname1"></label>

まだまだありますが、要点はわかります。すべての入力をコンテナー div にラップし、jQuery を使用してそれを空の div に複製しています。(そのため、ユーザーがクリックしてすべて同じ入力フィールドの新しいボックスを作成するための「複製」というボタンがあります。)

$('#replicate').click(function(){
$('.container').clone().appendTo($('.emptyContainer'));

そして、新しいコンテナーが作成されるたびに、そのクラスを 1 ずつインクリメントするために、すべての新しいコンテナーが必要です。

var container = $(".emptyContainer div").length;
var containerNumber = container + 1;
var containerClass = 'container' + containerNumber;
$(".emptyContainer .container").attr("class", containerClass);

私が今直面している問題は、最初の入力フィールドに値がある場合、複製ボタンが元のフィールドの情報を含む新しいコンテナーを作成することです。どうすればこれを克服できますか？

4

1 に答える 1

1

コンテナーを複製したら、入力フィールドを空にしてから、ターゲット コンテナーに追加する必要があります。

$('#replicate').click(function(){
    var clonedElm = $('.container').clone();
    clonedElm.find('input').val('');
    cloneElm.appendTo($('.emptyContainer'));
});

編集：

あなたは、新しいコンテナが作成されるたびに、そのクラスを1ずつインクリメントするためにすべての新しいコンテナが必要だと言いました。したがって、この場合、古いクラスを削除し、新しいクラスを複製されたコンテナーに割り当てる必要があります。

したがって、これが解決策になります。

$('#replicate').click(function(){
    var clonedElm = $('.container').clone();
    clonedElm.find('input').val('');
    var container = $(".emptyContainer div").length;
    var containerNumber = container + 1;
    var containerClass = 'container' + containerNumber;
    clonedElm.removeClass('container').addClass(containerClass);
    clonedElm.appendTo($('.emptyContainer'));
});

デモフィドルを確認してください。

于 2013-06-09T04:55:19.693 に答える