使用Jquery点击后更改按钮文本（html）

Question

作为初学者，我正在为看似简单的事情而苦苦挣扎。我有一个禁用的文本区域和一个“编辑”按钮。一旦我点击它，文本区域就会变成我想要的可编辑状态，但我需要“编辑”变成“保存”，有人能帮忙吗？

这是代码：

<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>

试过这个但没用：

 $("#editButton").click(function () {
          $("#editButton").html("save");
        });

提前谢谢大家

Answer 1

我不确定你为什么说文本区域可以根据需要进行编辑，因为我在你提供的代码中看不到任何改变文本区域的内容。至于按钮的文本，我会在

.text

上使用

.html

- 只有在添加 HTML 时我才会使用后者。

如果您希望按钮具有切换效果，您可以使用：

$("#editButton").click(function() {
  const isDisabled = !$('#textarea2').prop('disabled');

  $('#textarea2').prop('disabled', isDisabled)
  $("#editButton").text(isDisabled ? 'Edit' : 'Save');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>