1

私は登録ウェブサイトを開発していますが、人を追加する必要がある部分があります。私がしていることは、彼らがその人の名前と姓の下にあるテキストをクリックすると、別の 2 つのフィールド (名前と人をもう一度尋ねるので、上のフィールドのコピーです) が表示されるということです。これはclone()メソッドを使用して行います。名前と姓が、「情報」というクラスを持つ div 内にあるとします。そして、<p>含まれているときに追加の div を追加する には、「add」という ID があります。このような：

<div class="information">
<label for="name">Name</label>
<input type="text" name="name[]"> //it's an array because there's gonna be probably more than one (if they click the "add" text)
<label for="last_name">Last Name</label>
<input type="text" name="last_name[]">
</div>
<p id="add">Add another person</p>

私のJavaScript（jquery）は次のとおりです。

$('#add').click(function(){
    $('.information').clone().insertAfter('.information');
});

これの問題は、テキストの追加をクリックすると、最初の div がコピーされることです (それに何かを書いた場合は、それもコピーされます)。では、どうすればそれを解決できますか。それを行う他の方法はありますか？さらに、「情報」divを非表示にするボタンを作成する簡単な方法はありますか（ユーザーが追加したい人数を後悔した場合）。

どんな推薦も好評です。前もって感謝します。

編集：申し訳ありません。言い忘れた大事なことがあります。情報クラスは、ユーザーがチェックボックスをクリックした場合にのみ表示されます (他の人を追加したくない可能性があるためです。チェックボックスのコードは次のとおりです。

HTML (情報クラスの上):

<input type="checkbox" id="companion" />Companion

JQuery:

$("#companion").click(function() {
     $(".information").toggle();
     if ($('#companion').is(":checked")) {
        $('#add').show();
     }
     else {
        $('.companion').hide();
        $('.companion').removeAttr('checked');
    }
});

皆さんが私に見せてくれた例を試したので、これを明確にしますが、チェックボックスをクリックすると情報divが表示されません。これについては、元の投稿で言及する必要がありました。本当にすみません。

4

3 に答える 3

2

:lastおよび:firstセレクターを使用できます。次のことを試してください。

$('#add').click(function(){
    $('.information:first').clone().insertAfter('.information:last');
    $('.information:last').find('input').val('');
});

$('#remove').click(function(){
    if ($('.information').length > 1) {
       $('.information:last').remove()
    }
})


<p id='remove'>remove<p>

フィドル

于 2012-08-15T15:17:55.673 に答える
1

少しだけ変更して、このjsFiddle exampleのようにします。

これにより、人を追加したり、追加した新しい人を削除したりしながら、常に最初の人だけを残すことができます.

HTML

<div id="information">
<label for="name">Name</label>
<input type="text" name="name[]"> 
<label for="last_name">Last Name</label>
<input type="text" name="last_name[]">
</div>
<p id="add">Add another person</p>​

jQuery

$('#add').click(function() {
    $('#information').clone().find("input:text").val("").end().append('<span class="remove">remove</span>').removeAttr('id').insertBefore('#add');

});
$('body').on('click', '.remove', function() {
    $(this).parent('div').remove();
});​
于 2012-08-15T15:18:39.200 に答える
0

最後の div を複製する (内部にコンテンツがあるため) 代わりに、.information の内容を変数 (「コンテンツ」と呼びます) に格納する方がよいと思います。次に、ページロード時に「コンテンツ」を呼び出し、追加時に「コンテンツ」を呼び出すことができます。

必要に応じて、.information div 内にボタンを作成し、.information div のこのインスタンスを削除するクリック機能を与えることができます。

于 2012-08-15T16:12:41.533 に答える