Javascript 使用“保存”和“取消”按钮切换编辑按钮_Javascript_Jquery_Html_Button_Toggle

Javascript 使用“保存”和“取消”按钮切换编辑按钮

javascript jquery html button

Javascript 使用“保存”和“取消”按钮切换编辑按钮,javascript,jquery,html,button,toggle,Javascript,Jquery,Html,Button,Toggle,我想在单击按钮时更改它。只有一个“编辑”按钮。在我点击它之后，它将变成一个“保存”按钮，我还想在它旁边显示一个“取消”按钮。我该怎么做？我有下面的代码 <!DOCTYPE html> <html> <head> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

我想在单击按钮时更改它。只有一个“编辑”按钮。在我点击它之后，它将变成一个“保存”按钮，我还想在它旁边显示一个“取消”按钮。我该怎么做？我有下面的代码

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


罗克森演示
编辑
你好
再见
$（“按钮”）。单击（函数（）{
$（this.nextUntil（'button'）.toggle（）；
var btnText=$（this.text（）；
$（this.text（$（this.data（'text'））；
$（this）.data（'text'，btnText）；
});

您可以为“取消”添加一个新按钮，并根据需要将其隐藏。你可以按照

以下是您需要的代码：

<button id='EditSave' data-text="Save">Edit</button>
<button id='Cancel' data-text="Cancel" style="display:none;">Cancel</button>
    <p>Hello</p>
    <p style="display: none">Good Bye</p>

$("#EditSave").click(function(){
    var btnText = $(this).text();
    if(btnText == 'Edit')
    {
        $(this).text('Save');
        $('#Cancel').show();
    }
    else
    {
        $(this).text('Edit');
        $('#Cancel').hide();
    }
});

$('#Cancel').click(function(){
    $(this).hide();
    $('#EditSave').text('Edit');
});

编辑
取消
你好
再见
$（“#编辑保存”）。单击（函数（）{
var btnText=$（this.text（）；
如果（btnText==“编辑”）
{
$（this.text（'Save'）；
$（“#取消”）.show（）；
}
其他的
{
$（this.text（'Edit'）；
$（“#取消”）.hide（）；
}
});
$（'#取消'）。单击（函数（）{
$（this.hide（）；
$（'#EditSave'）。文本（'Edit'）；
});

我建议这样的布局和jQuery

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>

你为什么不干脆用三个ID按钮（编辑、保存、取消），然后根据需要更改它们，而不是使用段落和数据函数呢？@j08691你有没有一个例子我可以看一下？是的@j08691很好的一个！但是如果我在一个页面上有三组这样的按钮呢？我是否需要给他们不同的id，并分别为他们编写脚本？很抱歉成为jquery的新手…像这样？这是一个好的。但是，如果我在同一页上有多组按钮呢？那么我必须给每个人一个不同的身份证，对吗？有没有更简单的方法来解决这个问题？如果你给我你的意思的html，我将能够帮助你而不是使用$（这个），你可以缓存它并使用它。这将提高性能（或者您可以使用更改工具$（This）.hide（）.sides（'.save，.cancel'）.show（）；

.save, .cancel {
display:none;
}