0

私はまだ JavaScript と jQuery に非常に慣れていません。

ダイナミック s を追加するために機能する jQuery の「ボックスの追加」機能<textarea>がありますが、削除部分は機能しません。

私のコード:

$(function() {
    var i = $('textarea').size() + 1;
    $('#remove').click(function() {
        if (i > 1) {
            $('.this:last').remove();
            i--;
        }
    });

    $('.Add').live('click', function(e) {
        $('<div><textarea id="txt"></textarea> <textarea id="txt2"></textarea></div>').fadeIn('fast').appendTo('.Option');

        i++;
    });

});

デモ: http://jsfiddle.net/dnwTV/

どんな助けでも大歓迎です。

4

4 に答える 4

1

ノート

textarea同じで複数を作成していますid。それは許可されていません。

次のように追加コードを変更できます。

    $('.Add').live('click', function(e) {
        $('<div><textarea id="txt'+ i +'"></textarea> <textarea id="txt'+ (i+1) +'"></textarea></div>').fadeIn('fast').appendTo('.Option');
        i++;
    });

後もう一つ

の代わりにlive、を使用しますon()。動的に追加していないので、そのための委任.Addは必要ありません。live以下を使用してください：

$('.Add').on('click', function(e) {
     $('<div><textarea id="txt"></textarea> <textarea id="txt2"></textarea></div>').fadeIn('fast').appendTo('.Option');    
     i++;
});

完全なコードは次のようになります。

$(function() {
    var i = $('textarea').size() + 1;
    $('#remove').click(function() {
        i = $('textarea').size() + 1;
        if (i > 1) {
            $('.Option > textarea:last').last().remove();
            i--;
        }
    });

    $('.Add').on('click', function(e) {
        $('<textarea id="txt' + i + '"></textarea> <textarea id="txt' + (i + 1) + '"></textarea>').fadeIn('fast').appendTo('.Option');
        i++;
    });
});

作業サンプル

于 2012-07-09T15:58:16.917 に答える
1

を選択していますが.this:last、の要素classはthis存在しません。textarea:last代わりにセレクターとして使用してください。また、マークアップに一貫性がありません。オリジナルは<div>2つをラップする別のものを持っている必要があり<textarea>ます。これがjsFiddleの修正バージョンです。

$(function() {
    var i = $('.Option > div').size() + 1;

    $('#remove').click(function(e) {
        if (i > 1) {
            $('.Option > :last').remove();
            i--;
        }

        e.preventDefault();
    });

    $('.Add').click(function(e) {
        $('<div><textarea id="txt"></textarea> <textarea id="txt2"></textarea></div>').fadeIn('fast').appendTo('.Option');

        i++;
    });
});​

そうは言っても、あなたの現在のコードが十分にきちんとしているか、一般的であるとは思わない。これをよりクリーンにする方法の例については、このjsFiddleを参照してください。

于 2012-07-09T15:58:57.790 に答える
0

これが機能する更新されたフィドルです

http://jsfiddle.net/dnwTV/5/

Javascript：

$(function() {

    $('#remove').click(function() {
        $('.Option div:last').remove();                
    });

    $('.Add').live('click', function(e) {
        var i = $('textarea').length + 1;
        $('<div><textarea id="txt' + i + '"></textarea> <textarea id="txt' + (i+1) + '"></textarea></div>').fadeIn('fast').appendTo('.Option');
    });
});​

idまた、ページごとに一意である必要があるhtmlを再利用しているという事実を修正しました。

于 2012-07-09T15:59:20.800 に答える
0

これがあなたが達成しようとしている効果だと思います：

デモ: http://jsfiddle.net/SO_AMK/dnwTV/4/

コード：

HTML:

<div class='Option'><textarea id="txt"></textarea> <textarea id="txt2"></textarea> </div>
<a href="#" id="remove">Remove</a>

<br/><br/>
<span class='Add'>Add Option</span>

jQuery:

$(function() {
    var i = $('textarea').size() + 1;
    $('#remove').click(function() {
        if (i > 1) {
            $('textarea:last').parent().remove();
            i--;
        }
    });

    $('.Add').click(function(){
        $('<div><textarea id="txt"></textarea> <textarea id="txt2"></textarea></div>').fadeIn('fast').appendTo('.Option');

        i++;
    });

});​
于 2012-07-09T16:00:05.267 に答える