0

我敢打赌我在这里忽略了一些简单的东西，但是我花了一些时间写这个FIDDLE希望有人能指出，为什么它不将输入中的数据附加到.row它来自的 div 中。

让我们从 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)

    });

一切都来自我制作的这个小提琴，看看这里我的角度。

本质上，用户添加了一个新行，打开一个编辑器，然后我想将输入数据附加到打开的编辑器来自的特定行......

this当发生两个函数并且发送数据的函数不是我所指的元素时，我不确定如何合并。

如果我在第一行附加内容，它会很好地附加，然后当我添加一个新行并创建一个新的输入值时，它会附加到第一行和它来自的行，我如何将它限制在它来自的行?

我在考虑可能需要创建一个索引函数来获取元素的索引，但又不是 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 回答
0

您在添加到行类时错误地编写了选择器（应该是“.row”而不是“row”）。不知不觉

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

利用

jQuery('.display-content > .row').append(contentData);
于 2013-09-19T18:28:06.123 回答