Question

我正在尝试使用jquery对话框来编辑网页的内容。我想要一个编辑按钮，从下面的列表中获取内容（只有名称和BIOS，而不是图像）并将它们放入jquery对话框中。该对话框将分别具有可编辑的文本字段和名称和生物的可编辑文本区域，用于列表中的条目。我认为这样做的方式就像

$("#list").each(function() {
    $("#dialog-list").append($(this).text());
}

但是当我需要为每个人添加名称和生物时，我无法弄清楚如何做到这一点。事实很复杂的是，在原始列表的每个li中，我有一个内部ul。我需要这个，因为我想将图像放在名称和生物旁边。所以，我的两个问题是：有没有办法做我在这里描述的内容，如果我有更好的方法将图像放在原始列表中的文本旁边，那么会有更简单的方法吗？谢谢你的帮助。

<ul id="list">
    <li class="person">
        <ul class="contents">
        <li>
            <img src="images/person.png">
        </li>
        <li>
            <h2>John Smith</h2>
            <hr/>
            <p>Bio</p>
        </li>
        </ul>   
    </li>
    <li class="person">
        <ul class="contents">
        <li>
            <img src="images/person.png">
        </li>
        <li>
            <h2>John Smith</h2>
            <hr/>
            <p>Bio2</p>
        </li>
        </ul>   
    </li>
</ul>

Answer 1

您可以尝试此操作（DEMO）

$(function(){
    $('.edit').on('click', function(){
        var el = $(this),
            div = $('<div/>', {
                'id':'dlg',
                'class':'dlgEditor'
            }).append($('<label/>', {
                'text':'Name',
                'style':'display:block'
            })).append($('<input/>', {
                'type':'text',
                'style':'width:250px',
                'id':'name',
                'value':el.closest('li').find('h2').text()
            })).append($('<label/>', {
                'text':'Bio',
                'style':'display:block'
            }))
            .append($('<textarea/>', {
                'id':'bio',
                'style':'width:250px',
                'html':el.closest('li').find('p').text()
            })).appendTo('body')
            .dialog({
                title:'Edit',
                buttons: [
                   {
                       text: "Save",
                       click: function(){
                           var li = $('li.editing'),
                               name = $(this).find('#name').val(),
                               bio = $(this).find('#bio').val();
                           li.find('h2').text(name);
                           li.find('p').text(bio);
                       }
                   },
                   {
                       text: "Close",
                       click: function(){
                           $(this).dialog('close');
                           $('li.editing').removeClass('editing');
                       }
                   }
               ]
        });
        el.closest('li').addClass('editing');
    });
});

动态jquery对话框

1 个答案: