0

最初に2つの入力を持つ1つの情報「ポッド」を含むユーザー入力フォームを作成しています。clone()/insertBefore() を介してポッドを複数回動的に複製するための「別の追加」ボタンがあります-これは正常に機能しているようです。ここに私がこれまでに行ったことのフィドルがあります: http://jsfiddle.net/N6Xty/8/

次の 2 つの機能がごちゃごちゃしています。 .removeClass()、2 番目に 'if' ステートメント (コメント アウトされています) がありますが、'if' は修正できないコンソール構文エラーをスローします。何が起こっているのかを説明するよりも、フィドルを表示する方がはるかに簡単ですが、最初の「削除」ボタンが間違ったポッドにあり、実際に機能するのはこれだけです...コード参照には、2 つの関連する変数があります:「removeThisDivButton」および「removeThisDivButton02」

2: 複製された各ポッドにはフォーム入力要素があります - それらに一意の ID (たとえば、テキストエリアを参照するラベル用) を持たせたいので、動的 ID のインクリメントを実装しようとしましたが、成功は限られていました。また、一意の ID も試しています。実際のポッド (100% 必須ではありませんが、理想的にはそうします)。このために、2 つの「ID 追加」スクリプトがあり、1 つは「インデックス」を利用し、もう 1 つはこの SO 投稿から取得したコメント アウトされています: Append ID's

(他の「append id」応答を見たことがありますが、これに適用する方法がわかりません)。

誰かがこれについて私にアドバイスできるなら、事前に大いに感謝します。

HTML:

<div id="outer-wrapper">
        <div class="content-wrapper">
            <a href="#" title="Duplicate" class="duplicate-butt">Add Another</a>
            <form name="userInfoForm" method="post" action="">
                <div id="info-div-" class="append-me-div">      
                    <select name="various-options">
                        <option>-- Please Choose --</option>
                        <option value="opt-one">One</option>
                        <option value="opt-two">Two</option>
                        <option value="opt-three">Three</option>
                    </select>
                    <label for="message-">Comments:</label>
                    <textarea id="message-" class="message-box" rows="10" cols="30"></textarea>

                    <a href="#" class="remove-this-div hidden-button">Remove ME</a>

                </div>
                <button type="submit" id="submit-button">Submit</button>
            </form>
        </div>
    </div>

jQuery:

(function($){
        // append ID (partly working)
        $('#info-div-, #message-').each(function(index){
            $(this).attr({
                'id': this.id + index
            });
        });

        // duplicate the <div>append-me-div</div> + show the 'Remove Me' button
        var duplicateButton = $('a.duplicate-butt');
        var appendMeDiv = $('div.append-me-div');
        var removeThisDivButton = $('a.remove-this-div');
        //var removeThisDivButton02 = $('<a href="#" class="remove-this-div">Remove ME</a>');

        duplicateButton.on('click', function(index){
            appendMeDiv.clone().insertBefore('button#submit-button');

            // 'Remove Me' version01
            removeThisDivButton.removeClass('hidden-button');   

            // 'Remove Me' version02
            /*if (this.appendMeDiv:eq+=(1)){
                removeThisDivButton02.appendTo(this.appendMeDiv);
            }*/

            // append ID (PARTLY working)
            /*appendMeDiv.attr({
                'id': this.id += 1
            });*/

            // append ID (not working)
            var idIncrement = 0;
            $('#info-div-, #message-').each(function(){
            //$('#info-div-').each(function(){
                idIncrement++;
                $('this').attr('id', 'id'+idIncrement);
            });

            console.log('a.duplicate-butt clicked');
        });

        // remove the current/parent <div>append-me-div</div>
        removeThisDivButton.on('click', function(e){
            $(this).parent('div').remove();
            e.preventDefault(); // tried this to stop the page auto-scrolling back to top on click - not working
            console.log('CLICKED: a.remove-this-div');      
        });
    })(jQuery);
4

2 に答える 2

1

これは実際には非常に単純です。コツは、ハンドラーを元の「Remove me」ボタンにアタッチし、アタッチされたハンドラーをclone(true, true)含むすべてを複製するために使用することです。

(function($) {
    var appendMeDiv = $('.append-me-div');
    var submitButton = $('#submit-button');
    var count = 0;
    $('.remove-this-div').hide().on('click', function(e) {
        e.preventDefault();
        $(this).closest('.append-me-div').remove();
    });
    $('a.duplicate-butt').on('click', function(e) {
        e.preventDefault();
        var clone = appendMeDiv.clone(true, true).insertBefore(submitButton).find('.remove-this-div').show().end();
        var messageBox = clone.find('.message-box');
        var id = messageBox.attr('id') + ++count;
        messageBox.attr( 'id', id ).prev('label').attr( 'for', id );
    });
})(jQuery);

デモ

個人的には、私は機能を省略し<label for="...">ます。この場合、テキストエリアはラベルよりもはるかに大きなターゲットであるため、特に重要ではありません。

JavaScript は次のようになります。

(function($) {
    var appendMeDiv = $('.append-me-div');
    var submitButton = $('#submit-button');
    $('.remove-this-div').hide().on('click', function(e) {
        e.preventDefault();
        $(this).closest('.append-me-div').remove();
    });
    $('a.duplicate-butt').on('click', function(e) {
        e.preventDefault();
        appendMeDiv.clone(true, true).insertBefore(submitButton).find('.remove-this-div').show();
    });
})(jQuery);

デモ

于 2013-06-08T00:25:52.327 に答える
1

これでうまくいくはずです。新しいクローンをオブジェクトとして保存してから、それに対して操作を行う必要があります。これには確かに微調整が必​​要ですが、うまくいけば、うまくいくでしょう。

http://jsfiddle.net/N6Xty/9/

すべての魔法はここで起こります: var newOne = appendMeDiv.clone();. 楽しみ！

于 2013-06-07T20:12:05.563 に答える