javascript - 如何将编辑按钮更改为保存按钮并添加取消按钮？

Question

我想要它出现在编辑按钮的位置，然后当我清除编辑按钮时，“编辑”将变为“保存”，然后也会显示“取消”按钮。

$('#edit').click(function() {
  $(this).hide();
  $('#save, #cancel').show();
});

$('#cancel').click(function() {
  $('#edit').show();
  $('#save, #cancel').hide();
});

.save,
.cancel {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <button type="button" class="btn btn-secondary" value="edit">Edit</button>
  <button type="submit" class="btn btn-success" value="save">Save Changes</button>
  <button type="button" class="btn btn-secondary" value="cancel">Cancel</button>
</form>

标签： javascriptjqueryhtml

Answer 1

您在代码中犯了一些小错误。

• .save, .cancel 应该在相关字段中添加
• 为每个按钮添加 id，因为您使用 jQuery 的“id”选择器

$('#edit').click(function() {
		$(this).hide();
		$('#save, #cancel').show();
	});

	$('#cancel').click(function() {
		$('#edit').show();
		$('#save, #cancel').hide();
	});
	
	$('#save').click(function() {
		$(this).hide();
		$('#cancel').hide();
		$('#edit').show();
	});

button.save, button.cancel {
        display: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<form>
   <button type="button" class="btn btn-secondary" value="edit" id="edit">Edit</button>
   <button type="submit" class="btn btn-success save" value="save" id="save" >Save Changes</button>
   <button type="button" class="btn btn-secondary cancel" value="cancel" id="cancel" >Cancel</button>
</form>