0

jquery ダイアログを使用して Web ページのコンテンツを編集しようとしています。以下のリストの内容(画像ではなく名前と略歴のみ)を取得し、それらをjqueryダイアログに入れる編集ボタンが必要です。このダイアログには、リストに入力するための、名前と略歴をそれぞれ編集可能なテキスト フィールドと編集可能なテキスト領域があります。これを行う方法は次のようになると思います

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

しかし、各人の名前と略歴の両方を追加する必要がある場合、これを行う方法がわかりません。元のリストの各 li には、内部 ul があるという事実によって複雑になります。名前と略歴の横に画像を配置したいので、これが必要です。したがって、私の 2 つの質問は次のとおりです。ここで説明したことを実行する方法はありますか?元のリストのテキストの横に画像を配置するより良い方法があれば、より簡単な方法はありますか? 助けてくれてありがとう。

<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>
4

1 に答える 1

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');
    });
});
于 2013-10-27T21:33:21.520 に答える