1

jqueryのヘルプが得られるかどうか疑問に思っていました。これは私が今持っているhtmlです：

http://jsfiddle.net/spadez/9sX6X/4/

<form name="input">
<input id="current" type="text" name="content" placeholder="content">
<input type="submit" value="Add" id="add">
</form>

私がやりたいのは、ユーザーが「追加」をクリックしたときで、入力フィールドが空でない限り、次のことをしたいです:

  • その入力フィールド ID を「accepted」に変更し、その横にある追加ボタンを削除して、削除ボタンに置​​き換えます。
  • 元の入力フィールドの下に、id が「現在」の入力フィールドを追加し、その横に追加ボタンを追加します。

追加ボタンがクリックされるたびにこのプロセスが発生するようにして、より多くの入力ボックスを相互に生成できるようにします。私が得た限り、入力ボックスを生成しようとしていましたが、それでも機能しません。

function addField(){
$('#add').append('<input type="text" name="myinput" />');
return false;
}

誰でもこれを達成する方法を教えてください。

4

3 に答える 3

3

毎回既存の要素を複製するのは良い解決策ではないと思います。代わりに、クローンを作成することをお勧めします...まあ...クローン））オリジナルinputとbutton同じままで、視覚的にシフトしただけです。

この動作は必要ですか? - http://jsfiddle.net/skip405/9sX6X/6/

于 2013-06-19T11:54:03.723 に答える
1

使用するbefore()

$('#add').before('<input type="text" name="myinput" />');

送信ボタンの直前に新しい入力を追加する必要があるため（入力要素であるため、ここでは不可能です）

于 2013-06-19T11:38:56.897 に答える
0

実際の例http://jsfiddle.net/steelywing/9sX6X/12/

$('form').on('click', '.add', function () {
    var row = $(this).closest('div'),
        new_row = row.clone();

    row.find('input:text').addClass('accepted');

    row.find('.add')
        .removeClass('add')
        .addClass('remove')
        .val('Remove');

    new_row.find('input:text').val('');

    row.after(new_row);
}).on('click', '.remove', function () {
    $(this).closest('div').remove();
});
于 2013-06-19T11:56:42.410 に答える