JQuery - 无法使用新名称更新现有名称

Question

嗨，实际上我正在研究 jQuery。我在这里编写了代码来更新我的元素名称。为此，我给出了一个输入字段和保存按钮。我正在获取元素名称并将其显示到输入字段中。编辑输入字段后，当我单击“保存”按钮时，元素名称将替换为输入字段中的任何名称。所以，当我更新值时，我遇到了问题。请帮我。提前致谢。

$(document).ready(function() {
  $(".detail-wrp").on("click", function() {
    let inputVal = $(".prjt-nme", this).text();
    $(".prjt-nme", this).hide();
    $(".update-wrp", this).show();
    $(".detail-input", this).val(inputVal).focus().select();
    return false;
  });
  $(".detail-save-btn").on("click", function() {
    $(".prjt-nme").css({
      "display": "block"
    });
    $(".update-wrp").css({
      "display": "none"
    });
    let pk = $(this).parents(".detail-wrp").find(".detail-input").val();
    $(this).parents(".detail-wrp").find(".prjt-nme").text(pk);
  });
});

.general-settings>div {
  display: flex;
  padding: 6px 10px 6px 10px;
  width: 100%;
  cursor: pointer;
}

.general-settings>div:first-child {
  padding-top: 10px;
}

.general-settings>div:hover {
  background: #e9e9e9;
}

.general-settings>div:hover .prjt-edit-icon {
  display: block;
}

.general-settings>div>div:first-child {
  width: 40%;
}

.general-settings>div>div:last-child {
  width: 60%;
}

.general-settings>div>div .prjt-nme a {
  display: none;
}

.general-settings>div>div .prjt-nme a i {
  margin-top: 2px;
  margin-right: 10px;
}

.general-settings .update-wrp {
  display: none;
}

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<div class="general-settings">
  <div class="detail-wrp">
    <div>Project Name</div>
    <div>
      <div class="prjt-nme">ACTSLaw.comA1 <a href="#" class="float-right prjt-edit-icon"><i class="fas fa-pencil-alt"></i></a></div>
      <div class="update-wrp">
        <div>
          <input type="text" class="form-control detail-input" name="">
        </div>
        <div class="pt-1 clearfix d-flex update-and-cancel">
          <div>
            <button class="form-control detail-save-btn">Save</button>
          </div>
          <div>&nbsp;&nbsp;or&nbsp;&nbsp;<a href="#" class="detail-cancel-link">Cancel</a></div>
        </div>
      </div>
    </div>
  </div>
  <div class="detail-wrp">
    <div>Project Name</div>
    <div>
      <div class="prjt-nme">abcdefgh.comA1 <a href="#" class="float-right prjt-edit-icon"><i class="fas fa-pencil-alt"></i></a></div>
      <div class="update-wrp">
        <div>
          <input type="text" class="form-control detail-input" name="">
        </div>
        <div class="pt-1 clearfix d-flex update-and-cancel">
          <div>
            <button class="form-control detail-save-btn">Save</button>
          </div>
          <div>&nbsp;&nbsp;or&nbsp;&nbsp;<a href="#" class="detail-cancel-link">Cancel</a></div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

通过以下方式更新您的编辑点击:

    $(".prjt-nme").on("click", function() {
    let inputVal = $(this).text();
    $(this).hide();
    $(this).next().show();
    $(".detail-input", this).val(inputVal).focus().select();
    return false;
    });

此外，您需要将元素名称放在 <span> 中并更新您的保存功能以再次显示铅笔图标。

<div class="prjt-nme"><span>abcdefgh.comA1</span> <a href="#" class="float-right prjt-edit-icon"><i class="fas fa-pencil-alt"></i></a></div> //html 

$(this).parents(".detail-wrp").find(".prjt-nme > span").html(pk); //in save function