0

ここで簡単なことを見落としているに違いありませんが、入力からのデータを元のdivに追加しない理由を誰かが指摘できることを期待して、このFIDDLE.rowを書くのに時間がかかりました。

HTMLから始めましょう

    //Ill be grabbing HTML from here
    <div id="sample-content">
        <div class="row">
            <button type="button" class="open-editor">open editor</button>
        </div>
    </div>

    //Where the input value will come from, (hidden at start)
    <div class="editor">
        <input name="content" value=""/>
        <button type="button" class="send-to-content">insert content</button>
        <button type="button" class="close-editor">close this editor</button>
    </div>

    //Displaying the actual generated content here. Appending the .row from the sample.
    //Has a button to the editor which I want to append the value to the specific row
    <div class="display-content">

    </div>

    //Add a new row into .display-content
    <button type="button" class="add-row">add row</button>

次に、jQuery

var myApp = {

    openEditor : function(el) {

        jQuery('.editor').addClass('opened')

    },

    closeEditor : function(el) {

        jQuery('.editor').removeClass('opened')

    },

    appendRow : function(el) {

        var cloneRow = jQuery('#sample-content > div.row').clone();

        cloneRow.appendTo('.display-content');

    },

    sendContent : function(el) {

        var contentData = jQuery('input[name="content"]').val();

        alert(contentData +  ' <- append this to the row the button click came from');

        jQuery('.display-content > row').append(contentData);

        myApp.closeEditor()

    },

}

    jQuery('.add-row').on('click', function() {

        myApp.appendRow(this)

    });

    jQuery('.display-content').on('click', '.open-editor', function() {

        myApp.openEditor(this)

    });

    jQuery('.editor').on('click', '.send-to-content', function() {

        myApp.sendContent(this)

    });

    jQuery('.editor').on('click', '.close-editor', function() {

        myApp.closeEditor(this)

    });

すべては私が作成したこのフィドルからのものです。ここで私の角度を理解するために見てください。

基本的に、ユーザーは新しい行を追加し、エディターを開き、開いているエディターの元の特定の行に入力データを追加したい...

this2 つの関数が発生し、データを送信する関数が参照している要素ではない場合、組み込む方法がわかりません。

最初の行にコンテンツを追加すると、うまく追加されます。次に、新しい行を追加して新しい入力値を作成すると、最初の行と元の行に追加されます。元の行に制限するにはどうすればよいですか?

要素のインデックスを取得するインデックス関数を作成する必要があるかもしれないと考えていましたが、それを組み込む方法が100％確実ではありません..いくつかのヒントを期待しています:)

フィドル

4

2 に答える 2

2

現在編集中の行を に設定し、.activeその内容を追加します。

var myApp = {
    openEditor : function() {
        $('.editor').addClass('opened');
        $(this).closest('.row').addClass('active');
    },
    closeEditor : function() {
        $('.editor').removeClass('opened');
        $('.row').removeClass('active');
    },
    appendRow : function() {
        var cloneRow = $('#sample-content > div.row').clone();
        cloneRow.appendTo('.display-content');
    },
    sendContent : function() {
        var contentData = $('input[name="content"]').val();
        alert(contentData +  ' <- append this to the row the button click came from');
        $('.row.active').append(contentData);
        myApp.closeEditor();
        $('.row').removeClass('active');
    }
}

$('.add-row').on('click', myApp.appendRow);
$('.display-content').on('click', '.open-editor', myApp.openEditor);
$('.editor').on('click', '.send-to-content', myApp.sendContent);
$('.editor').on('click', '.close-editor', myApp.closeEditor);

フィドル

于 2013-09-19T18:24:53.680 に答える