Редактирования комментария jquery

206

19 апреля 2018, 10:04

В общем мой код:

$(".edit-event").on("click", function(event) { 
  var current_text = $(this).parents(".comment").find(".showComment").click(); 
 
  var edit = $('<textarea>', { 
    id: 'editComment', 
    width: "620px", 
    class: "form-control", 
    height: "120px", 
    placeholder: "Напишите Ваш отзыв" 
  }).text(current_text.text()); 
  current_text.replaceWith(edit.appendTo(".media-list")); 
})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> 
<link rel="stylesheet" href="http://bootstraptema.ru/plugins/2016/bootsnav/bootsnav.css" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="http://bootstraptema.ru/plugins/2016/bootsnav/bootsnav.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<body> 
  <ul class="media-list"> 
    <div class="comment"> 
      <a class="pull-left"> 
        <img src="http://ru/temp/public/img/default_avatar.png" alt="" class="img-circle" width="68" height="48"> 
      </a> 
      <div class="media-body"> 
        <p id="admin">GreatAdmin</p> 
        <span class="text-muted"><h4 class="date">2018-04-17 15:18:04</h4></span> 
        <p class="showComment"> 
          <a>The battle begins, and sixteen teams across the globe are fighting towards one goal – to win the League of Legends World Championship. To kick off the start of the action, we set out to craft a war cry to rally behind. Whether you’re a solo queue warrior or fightin</a> 
        </p> 
        <button class="btn btn-warning pull-right edit-event"> 
          <i class="material-icons" title="Редактировать">edit</i> 
        </button> 
      </div> 
  </ul>

Подскажите, как мне сделать, чтобы когда кликало на "edit" второй раз, комментарий возвращался в прежнее состояние (на данный момент там добавляется еще одна форма, что в корне неправильно) И если можете, то подскажите пожалуйста, как можно сделать к примеру код более грамотным. Благодарю за помощь.

Answer 1

Я бы сделал так:

$("button").click(function(e) { 
  if ($("div").attr("contenteditable") == 'false') { 
    $("div").attr("contenteditable", "true"); 
    $("div").css({ border: "1px solid black" }); 
  } else { 
    $("div").attr("contenteditable", "false"); 
    $("div").css({ border: "none" }); 
  } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><div contenteditable="false"> 
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eum libero earum tenetur recusandae soluta non quasi, totam nobis illum alias ad aspernatur! Consectetur repellendus incidunt qui ut obcaecati non iste. 
</div> 
<button>edit</button>

А если вам нужно сразу отправлять данные на сервер то ajaxom по нажатии при завершении редактирования. Если брать ваш случай то при 1 нажатии можно кнопки давать любой атрибут в false и при втором нажатии проверять его.