Question

我正在尝试使用jquery进行帖子编辑。但我对图像思考存在问题。

我已从codepen.io创建了 DEMO 。

在此演示中，您可以看到有两个编辑按钮。如果单击edit1，则图像删除(x)按钮将出现在右上方的栏中，但这只会出现一次。它需要来两个删除按钮，因为有两个图像。那里有什么问题，我该如何解决这些问题。在这方面，任何人都可以帮助我吗？

JS

$(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>

Answer 1

我发现那里有两个主要问题。

使用html（）函数获取匹配元素集中第一个元素的HTML内容。看看document

- ＆GT;你会得到HTML而不是img的src。但是稍后当您尝试在创建“编辑区域”期间设置src属性时，这是图像不起作用的主要原因   display（.attr（）函数最好获取src属性）

与消息（.text（）函数相同的错误逻辑可能会更好   在这种情况下的解决方案）

不要忘记检查您是否创建了编辑区域。目前每次都会创建一个新的“编辑区”。重复！

希望它会对你有所帮助。

jquery编辑帖子，图像缺少某些东西

1 个答案: