Question

我打赌我在这里忽略了一些简单的事情，但是我花了一些时间来写这个FIDDLE希望有人可以指出，为什么它没有将输入中的数据附加到div .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)

    });

一切都来自我制作的fiddle，请看一下我的角度。

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

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

如果我在第一行追加内容它会很好地附加，那么当我添加一个新行并创建一个新的输入值时，它会附加到第一行和它来自的行，如何将其限制为行它来自哪里？

我在考虑可能需要创建一个获取元素索引的索引函数，但同样不能100％确定如何合并它。希望提供一些提示：）

FIDDLE

Answer 1

将当前正在编辑的行设置为.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);

FIDDLE

Answer 2

添加到行类时你写的选择器错误（应该是“.row”而不是“row”）。而不是

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

使用

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

将数据附加到动态DIV（由jquery .clone（）创建）

2 个答案: