JQuery单击编辑帖子和选定的ID不起作用

Question

我正在尝试进行帖子编辑。但我有一些问题。

我已从codepen.io创建了 DEMO 。

在此演示中，您可以看到有两个编辑(red)按钮。当您单击第一个编辑按钮时，文本和图像编辑区域将出现在那里。但是，如果您检查开发人员控制台，则可以看到图像ID不是真实图像ID。与正常的第一张图片id="1"和第二张图片id="2"一样，但点击“编辑”按钮后，编辑区域图片ID不适用于第二张图片id="2"所有图片id="1"有什么问题我的jquery代码。

另外我如何从<div class="del" id="here">x</div>

中输入图片ID

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" class="ab" id="1">
       </div>
       <div class="postInfo">
         <img src="http://hdwallpaperia.com/wp-content/uploads/2013/10/Home-Sweet-Home-Wallpaper.jpg" class="ab" id="2">
       </div>
      <div class="ptx"> fdasfads fsasd 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" class="ab" id="2">
         fdasfads fasd fadsf aldsf adsf adsf asd fasd f dfsassssg5
      </div>
      <div class="ptx"> fdasfads fasd fadsf adsf adsf adsf asd fasd f dfsas</div>
      <div class="editBtn" name="edit" id="2">Edit2</div>
   </div>
</div>

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 imid = $(".postInfo img").attr("id");
      var editImage = $('<div class="edi"><div class="del" id="imageid">x</div>' + selected + '</div>').html();
      var editMarkUp = '<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 + " .ptx").html(editMarkUp);
      $("#messageB" + ID + " .postInfo").html(editImage);
      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);
   });
});

Answer 1

＆＃13;

＆＃13;

$(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();
      $(".postInfo", $("#messageB" + ID)).each(function() {
        $('.edi .del', $(this)).show();
     });

     var editMarkUp = '<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 + " .ptx").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);
  
   $(".postInfo", $("#messageB" + ID)).each(function() {
      $('.edi .del', $(this)).hide();
   });
  });
});

＆＃13;

.container {
   margin:0px auto;
   width:100%;
   max-width:550px;
   background-color:#d8dbdf;
   border-radius:2px;
   margin-top:50px;
   padding:10px;
   overflow:hidden;
}

.postAr {
   padding:20px;
   box-sizing:border-box;
   width:100%;
   background-color:#f5f5f5;
   float:left;
   position:relative;
}
.cNeD {
   background-color:blue;
   color:#ffffff;
   padding:5px;
   width:100px;
}
.postInfo {
   position:relative;
   width:100%;
   float:left;
}
.editBtn {
   width:50px;
   padding:10px;
   background-color:red;
   float:left;
   position:relative;
   text-align:center;
   color:#ffffff;
   cursor:pointer;
}
.del {
   position:absolute;
  right:0px;
   width:20px;
   height:20px;
   background-color:red;
   border-radius:50%;
   -webkit-border-radius:50%;
   text-align:center;
   line-height:20px;
   color:#ffffff;
   font-weight:bold;
   z-index:1;
}
.postInfo img {
   width:100%;
}
.ptx {
   width:100%;
   float:left;
   padding:10px;
   box-sizing:border-box;
}
.edi {
   position:relative;
}
.edi img {
   border-radius:2px;
   width:100%;
}
/* hide delete button  by default */

.edi .del {
  display: none;
} 

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   <div class="postAr" id="messageB1">
    <div class="postInfo">
      <div class="edi">
        <div class="del" id="1">x</div>
        <img src="http://hdwallpaperia.com/wp-content/uploads/2013/10/Home-Sweet-Home-Wallpaper.jpg" class="ab" id="1">
     </div>
  </div>
  <div class="postInfo">
     <div class="edi">
        <div class="del" id="2">x</div>
        <img src="http://hdwallpaperia.com/wp-content/uploads/2013/10/Home-Sweet-Home-Wallpaper.jpg" class="ab" id="2">
     </div>
  </div>
    <div class="ptx"> fdasfads fsasd 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">
     <div class="edi">
        <div class="del" id="2">x</div>
        <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" class="ab" id="2">
     </div>
     fdasfads fasd fadsf aldsf adsf adsf asd fasd f dfsassssg5
  </div>
  <div class="ptx"> fdasfads fasd fadsf adsf adsf adsf asd fasd f dfsas</div>
  <div class="editBtn" name="edit" id="2">Edit2</div>
 </div>
</div>

＆＃13;

＆＃13;

＆＃13;