动态jquery对话框

我想使用jquery对话框来编辑网页的内容。我想要一个编辑按钮，从下面的列表中获取内容（仅限名称和bios，而不是图像），并将其放入jQuery对话框中。该对话框将分别具有可编辑的文本字段和用于名称和生物的可编辑文本区域，以供列表中输入。我lmpw的方式做，这会是这样的动态jquery对话框

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

，但我无法弄清楚如何做到这一点的时候，我需要同时添加名称和每个人的生物。事实很复杂，在原始列表的每一个里面，我都有一个内部的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>

来源

2013-10-27 jmh

你可以试试这个（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'); 
    }); 
});

来源

2013-10-27 21:33:21

动态jquery对话框

回答

相关问题