使用保存和取消按钮切换编辑按钮答案

【问题标题】：toggle edit buttons with save and cancel buttons使用保存和取消按钮切换编辑按钮
【发布时间】：2012-07-15 16:09:25
【问题描述】：

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

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

【问题讨论】：

为什么不简单地拥有三个带有 id 的按钮（编辑、保存、取消），然后根据需要更改它们，而不是使用段落和数据功能？
@j08691 你有例子我可以看看吗？
是的jsfiddle.net/j08691/JbZnf
@j08691 好一个！但是，如果我在一页上有 3 组这些按钮呢？我需要给他们不同的 id 并为他们单独编写脚本吗？对不起，我是 jquery 新手...
喜欢这个？ jsfiddle.net/j08691/JbZnf/1

标签： javascript jquery html button toggle

【解决方案1】：

您可以为取消添加一个新按钮，然后根据需要将其隐藏。你可以关注demo here

这里是你需要的代码：

<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');
});

【讨论】：

这是一个很好的。但是，如果我在同一页面上有不止一组按钮怎么办？然后我必须给每个人一个不同的ID，对吗？有没有更简单的方法来解决这个问题？
如果你给我你的意思的html，我可以帮你

【解决方案2】：

我建议像这样 jsFiddle example 的布局和 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>

CSS

.save, .cancel {
display:none;
}

【讨论】：

不使用$(this)，可以缓存使用。这将提高性能（或者您可以使用转换工具 $(this).hide().siblings('.save, .cancel').show();