我希望它出现在编辑按钮出现的位置,然后当我清除编辑按钮时,“编辑”将更改为“保存”,然后还会显示“取消”按钮。
$('#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>
最佳答案
您在代码中犯了一些小错误。
- .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>
关于javascript - 如何将编辑按钮更改为保存按钮并添加取消按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60075377/