javascript - 将文本输入值更新到段落中的问题

Question

我试图通过文本输入字段编辑现有段落。我已经编写了代码，其中一些工作正常。但问题是我无法更新我编辑的新值。我尝试为更新链接编写事件，但该事件不适用于此链接。请帮我。提前谢谢你。

$(document).ready(function() {
  $(".membership-input").hide();
  $(".membership-edit, .membership-update").on("click", function() {
    if ($(this).text() == 'Edit') {
      $(this).text('Update').removeClass("membership-edit").addClass("membership-update");
      //$(".membership-input").removeAttr("disabled").focus().select();
      $(this).parents("tr").find(".membership-input").show();
      $(this).parents("tr").find(".site-name").hide();
      inputVal = $(this).parents("tr").find(".site-name").text();
      $(this).parents("tr").find(".membership-input").val(inputVal).focus().select();
      $(this).parents("tr").find(".site-name").val(updatedVal);
    } else {
      $(this).text('Edit').removeClass("membership-update").addClass("membership-edit");
      //$(".membership-input").attr({"disabled":"disabled"});
      $(this).parents("tr").find(".membership-input").hide();
      $(this).parents("tr").find(".site-name").show();
    }

  });

});

.site-settings>tbody>tr>td {
  border-top: none !important;
  vertical-align: middle;
}

.site-settings>tbody>tr>td:first-child {
  padding-left: 0;
  width: 30%;
}

.site-settings>tbody>tr>td:last-child {
  padding-left: 0;
  width: 30%;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<main class="all-content-wrap">
  <div class="admin-console-wrap">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-12">
          <h1>Site Settings</h1>
          <h4 class="mrgn-top-20">Names</h4>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <table class="table site-settings">
            <tbody>
              <tr>
                <td>
                  <p>Site Name</p>
                </td>
                <td>
                  <p class="site-name">Lorem</p>
                  <input class="form-control input-md membership-input" type="tet">
                </td>
                <td>
                  <p><a class="link membership-edit" href="#">Edit</a></p>
                </td>
              </tr>
              <tr>
                <td>
                  <p>Site Alternate Name</p>
                </td>
                <td>
                  <p class="site-name">Lorem.com</p>
                  <input class="form-control input-md membership-input" type="tet">
                </td>
                <td>
                  <p><a class="link membership-edit" href="#">Edit</a></p>
                </td>
              </tr>
              <tr>
                <td>
                  <p>Legal Name of Business</p>
                </td>
                <td>
                  <p class="site-name">Lorem (india) Pvt. Ltd.</p>
                  <input class="form-control input-md membership-input" type="tet">
                </td>
                <td>
                  <a class="link membership-edit" href="#">Edit</a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</main>
<script src="https://cdn.paperindex.com/bootstrap/js/bootstrap.min.js">
</script>

Answer 1

看到你的程序，发现了两个问题。

---

1. 您似乎在程序中使用了未声明的 "updatedVal" 变量，而不是使用包含 dom (.文本()).

2. 您还没有编写任何代码来使用 input.val() 更新 dom 文本。因此获取输入的 val 并将其设置为 DOM 的文本。

为了更好地理解，我附上了更新后的代码。

更新代码

$(document).ready(function() {
  $(".membership-input").hide();
  $(".membership-edit, .membership-update").on("click", function() {
    if ($(this).text() == 'Edit') {
      $(this).text('Update').removeClass("membership-edit").addClass("membership-update");
      //$(".membership-input").removeAttr("disabled").focus().select();
      $(this).parents("tr").find(".membership-input").show();
      $(this).parents("tr").find(".site-name").hide();
      inputVal = $(this).parents("tr").find(".site-name").text();
      $(this).parents("tr").find(".membership-input").val(inputVal).focus().select();
    } else {
      updatedVal = $(this).parents("tr").find(".membership-input").val();
      $(this).parents("tr").find(".site-name").text(updatedVal);

      $(this).text('Edit').removeClass("membership-update").addClass("membership-edit");
      //$(".membership-input").attr({"disabled":"disabled"});
      $(this).parents("tr").find(".membership-input").hide();
      $(this).parents("tr").find(".site-name").show();
    }

  });

});

.site-settings>tbody>tr>td {
  border-top: none !important;
  vertical-align: middle;
}

.site-settings>tbody>tr>td:first-child {
  padding-left: 0;
  width: 30%;
}

.site-settings>tbody>tr>td:last-child {
  padding-left: 0;
  width: 30%;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<main class="all-content-wrap">
  <div class="admin-console-wrap">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-12">
          <h1>Site Settings</h1>
          <h4 class="mrgn-top-20">Names</h4>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <table class="table site-settings">
            <tbody>
              <tr>
                <td>
                  <p>Site Name</p>
                </td>
                <td>
                  <p class="site-name">Lorem</p>
                  <input class="form-control input-md membership-input" type="tet">
                </td>
                <td>
                  <p><a class="link membership-edit" href="#">Edit</a></p>
                </td>
              </tr>
              <tr>
                <td>
                  <p>Site Alternate Name</p>
                </td>
                <td>
                  <p class="site-name">Lorem.com</p>
                  <input class="form-control input-md membership-input" type="tet">
                </td>
                <td>
                  <p><a class="link membership-edit" href="#">Edit</a></p>
                </td>
              </tr>
              <tr>
                <td>
                  <p>Legal Name of Business</p>
                </td>
                <td>
                  <p class="site-name">Lorem (india) Pvt. Ltd.</p>
                  <input class="form-control input-md membership-input" type="tet">
                </td>
                <td>
                  <a class="link membership-edit" href="#">Edit</a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</main>
<script src="https://cdn.paperindex.com/bootstrap/js/bootstrap.min.js">
</script>

如果您仍然发现任何问题，请随时发表评论。