0

divとspanでテキストが表示されたページがあります。それぞれの横に、ユーザーがクリックできる画像があります。

ユーザーがこの画像をクリックすると、テキストをテキスト領域に変更して、ユーザーがテキストを編集できるようにする必要があります。次に、ユーザーがクリックすると、phpスクリプトを呼び出してajax経由でDBに保存する必要があります。

すべてのdivと画像には一意のIDがあるため、jqueryセレクターを使用すると簡単になります。

誰か助けてもらえますか？私がこれまでに試したすべてが実際には機能していません。

ありがとう

4

3 に答える 3

0

divを編集可能にすることができます：

$(".ajax-div .on-img").on("click",function(ev) {
    $(this).parent().find(".editable-text").attr("contenteditable", "true").after("<button onclick='saveEdits()'>Save</button>");
})

あなたのhtml構造はこのように見える必要があります

<div class="ajax-div" id="somediv">
<div class="editable-text">Editable text</div>
<img class="on-img" src="" alt="">
</div>

saveEdits（）関数：

function saveEdits() {
    $(".ajax-div").each(function() {
       if(this.hasAttr("contenteditable") && this.attr("contenteditable")==true) {
            id = $(this).attr("id");
            //handle change
        }
    })

}

于 2012-10-22T11:17:19.703 に答える
0

あなたが持っているとしましょう：

<div id='mydivparent'>
Some text here
     <div>
           <img src='images/mypic.jpg' id='mydiv' onclick='editr(this)' />
     </div>
</div>

要件が示唆するように行うには、以下のJSコードで十分なアプローチがあります。

<script>

   function editr(obj)
            {
               var id = $(obj).attr('id');
               var text = $('#mydiv'+parent).text();
               $('#mydiv'+parent).empty();
               $('#mydiv'+parent).append('<form action='form_processor.php'  onsubmit="send_ajax($('textarea#'+id+').value)"><textarea id='+id+'>'+text+'</textarea><input type='submit' value='Save Text'></form>');

            } 
     function send_ajax(txtValue){

                 $.ajax({
                       url: 'form_processor',
                       cache: false;
                       type: 'POST',
                       data: {'text': txtValue},
                       success: function(){
                           //Code to add the text to the div and delete the textarea returning it to a normal div
                         }


                 });
                 return false;                      

             }   

</script>

イメージIDからdivのIDに簡単にアクセスできるように、divとイメージIDに名前を付ける方法を覚えておく必要があります。独自のプロトコルを使用して、画像IDを持っている場合は、関連付けられたdiv idを取得できるようにするか、親を選択するのと同じくらい簡単に画像をdiv内に配置できるようにする必要があります。

編集後、ユーザーの後にajax用に設定できます。

コードは、たとえば最初に開いたテキストエリアを保存する前に別の画像をクリックした場合など、すべての状況を完全に網羅しているわけではありませんが、取るべきアプローチの正しい道にあなたを導くと信じています。

于 2012-10-22T12:44:04.563 に答える
0

私はこの投稿を見つけた人のためにこれを解決するために最後にjeditableプラグインを使用しました

于 2012-10-26T08:03:41.827 に答える