用保存和取消按钮切换编辑按钮 [英] toggle edit buttons with save and cancel buttons
本文介绍了用保存和取消按钮切换编辑按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在点击按钮时更改按钮。最初只有一个编辑按钮。点击后，它会变成一个保存按钮，我也想在旁边显示一个取消按钮。
我该怎么做？我有下面的代码。
<！DOCTYPE html>
< html>
< head>
< script class =jsbinsrc =http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js>< / script>
< meta charset = utf-8 />
< title> demo by roXon< / title>
<！ - [if IE]>
< script src =http://html5shiv.googlecode.com/svn/trunk/html5.js>< / script>
<！[endif] - >
< / head>
< body>
<按钮data-text =保存>编辑< /按钮>
< p>你好< / p>
< p style =display：none> Good Bye< / p>
< script>
$（button）。click（function（）{
$（this）.nextUntil（'button'）。toggle（）;
var （）;
$（this）.data（'text' btnText）;
}）;
< / script>
< / body>
< / html>
解决方案
< （）。
$ p $ $'code $（'。edit'）。click（function（）{
$（this）.hide（）;
$（this）.siblings（'。save，.cancel'）。show（）;
}）;
$（'。cancel'）。click（function（）{
$（this）.siblings（'。edit'）。show（）;
$（this）.siblings '.save'）。hide（）;
$（this）.hide（）;
}）;
$（'。save'）。click（function（）{
$（this）.siblings（'。edit'）。show（）;
$（this）.siblings '.cancel'）。hide（）;
$（this）.hide（）;
}）;
HTML
< form>
< div>
< input class =edittype =buttonvalue =Edit/>
< input class =savetype =buttonvalue =Save/>
< input class =canceltype =buttonvalue =Cancel/>
< / div>
< div>
< input class =edittype =buttonvalue =Edit/>
< input class =savetype =buttonvalue =Save/>
< input class =canceltype =buttonvalue =Cancel/>
< / div>
< div>
< input class =edittype =buttonvalue =Edit/>
< input class =savetype =buttonvalue =Save/>
< input class =canceltype =buttonvalue =Cancel/>
< / div>
< / form>
CSS
.save，.cancel {
display：none;
}
I want to change the button when it's clicked. Initial there's only one "Edit" button. After I click it, it will become a "Save" button and I also want to show a "Cancel" button next to it. How can I do that? I have the code below.
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>demo by roXon</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<button data-text="Save">Edit</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
<script>
$("button").click(function(){
$(this).nextUntil('button').toggle();
var btnText = $(this).text();
$(this).text( $(this).data('text') );
$(this).data('text', btnText );
});
</script>
</body>
</html>
解决方案
I suggest a layout and jQuery like this jsFiddle example.
jQuery
$('.edit').click(function() {
$(this).hide();
$(this).siblings('.save, .cancel').show();
});
$('.cancel').click(function() {
$(this).siblings('.edit').show();
$(this).siblings('.save').hide();
$(this).hide();
});
$('.save').click(function() {
$(this).siblings('.edit').show();
$(this).siblings('.cancel').hide();
$(this).hide();
});
HTML
<form>
<div>
<input class="edit" type="button" value="Edit" />
<input class="save" type="button" value="Save" />
<input class="cancel" type="button" value="Cancel" />
</div>
<div>
<input class="edit" type="button" value="Edit" />
<input class="save" type="button" value="Save" />
<input class="cancel" type="button" value="Cancel" />
</div>
<div>
<input class="edit" type="button" value="Edit" />
<input class="save" type="button" value="Save" />
<input class="cancel" type="button" value="Cancel" />
</div>
</form>
CSS
.save, .cancel {
display:none;
}
这篇关于用保存和取消按钮切换编辑按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
