使用Jquery实现点击后修改HTML按钮文本

你的代码已经实现了按钮文字修改，但可以完善成双向切换的完整功能——点击「Edit」启用文本框并改成「Save」，点击「Save」禁用文本框并改回「Edit」，更贴合实际使用场景。

完整代码示例 #

HTML 部分

<div class="input-field">
  <textarea disabled id="textarea2" class="materialize-textarea" type="text" data-length="500">.            </textarea>
  <label for="textarea2"></label>
  <a href="#" class="btn-large" id="editButton">Edit</a>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

JavaScript 部分

$("#editButton").click(function() {
  // 缓存元素，避免重复查询DOM
  const $button = $(this);
  const $textarea = $("#textarea2");

  // 切换textarea的禁用状态
  $textarea.prop("disabled", !$textarea.prop("disabled"));

  // 根据当前按钮文本切换显示内容
  if ($button.text() === "Edit") {
    $button.text("Save");
  } else {
    $button.text("Edit");
  }
});

关键说明 #

• 用$(this)直接获取当前点击的按钮，比重复通过ID查询更高效
• 操作disabled这类布尔属性时，用prop()是jQuery的标准做法，比attr()更可靠
• 通过判断按钮当前文本实现双向切换，覆盖编辑-保存的完整流程

内容的提问来源于stack exchange，提问作者Marcus De Freitas