jquery編輯帖子與圖像丟失東西

我想使用jquery進行文章編輯。但我有一個圖像思考問題。jquery編輯帖子與圖像丟失東西

我從codepen.io創建了這個DEMO。

在這個演示中，你可以看到有兩個編輯按鈕。如果您單擊edit1，則圖像刪除(x)按鈕將出現在右上方的欄上，但只會出現一次。它需要來兩個刪除按鈕，因爲有兩個圖像。那裏有什麼問題，我如何解決這個問題。任何人都可以在這方面幫助我？

$(document).ready(function() { 
    $("body").on("click", ".editBtn", function(event) { 
     event.target.disabled = true; 
     var ID = $(this).attr("id"); 
     var selected = $("#messageB" + ID + " .postInfo img").parent().html(); 

     var currentMessage = $("#messageB" + ID + " .ptx").html(); 
     var editMarkUp = '<div class="edi"><div class="del">x</div>' + selected + '</div><div class="edBtnS"><div class="edSv">Save</div><div class="cNeD" id="' + ID + '">Cancel</div></div><textarea rows="5" cols="80" id="txtmessage_' + ID + '">' + currentMessage + '</textarea>'; 
     $("#messageB" + ID + " .postInfo").html(editMarkUp); 
     var data = $('#txtmessage_' + ID).val(); 
     $('#txtmessage_' + ID).focus(); 
     $('#txtmessage_' + ID).val(data + ' '); 
    }); 
    $("body").on("click", ".cNeD", function(event) { 
     $(".editBtn").prop('disabled', false); 
     var ID = $(this).attr("id"); 
     var currentMessageText = $("#txtmessage_" + ID).html(); 
     $("#messageB" + ID + " .ptx").html(currentMessageText); 
    }); 
});

HTML

<div class="container"> 
    <div class="postAr" id="messageB1"> 
     <div class="postInfo"> 
     <img src="http://hdwallpaperia.com/wp-content/uploads/2013/10/Home-Sweet-Home-Wallpaper.jpg" id="1"> 
     <img src="http://www.dam7.com/Images/Puppy/images/myspace-puppy-images-0005.jpg" id="1"> 

     </div> 
     <div class="ptx"> fdasfads fasd fadsf adsf adsf adsf asd fasd f dfsas</div> 
     <div class="editBtn" name="edit" id="1">Edit1</div> 
    </div> 
</div> 
<div class="container"> 
    <div class="postAr" id="messageB2"> 
     <div class="postInfo"> 
     <img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701"> 
     fdasfads fasd fadsf aldsf adsf adsf asd fasd f dfsassssg 
     </div> 
     <div class="editBtn" name="edit" id="2">Edit2</div> 
    </div> 
</div>

來源

2016-03-12 Azzo

快速演示這裏[codepen]（http://codepen.io/anon/pen/RaGNgJ?editors=1010）風格有點破，但功能似乎工作。 – Tran

我發現，有有2點主要的問題。

您使用html（）函數獲取匹配元素集合中第一個元素的HTML內容。看看document

- >您將得到HTML而不是IMG SRC的。但稍後當您嘗試在創建「編輯區域」期間設置src屬性時，主要是爲什麼圖像不顯示（.attr（）函數更適合獲取src屬性）

同樣的錯誤邏輯與消息（的.text（）函數可以在這種情況下，更好的解決方案）

不要忘記檢查，如果你有創建一個編輯區域或沒有。此刻每次它將創建一個新的「編輯區域」。重複！

希望它能幫助你一點。

來源

2016-03-12 13:50:14 Tran

jquery編輯帖子與圖像丟失東西

回答

相關問題