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

Question

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

4

当按钮被点击时，我希望您能更改它。一开始只有一个“编辑”按钮。点击后，它将变成一个“保存”按钮，并且我还想在其旁边显示一个“取消”按钮。

我该怎么做？我有下面的代码：

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

- wcdomy

为什么不直接使用三个带有ID的按钮（编辑，保存，取消），然后根据需要更改它们，而不是使用段落和数据函数呢？ - j08691

@j08691，你有一个我可以看看的例子吗？ - wcdomy

是的http://jsfiddle.net/j08691/JbZnf/ - j08691

@j08691 不错！但是如果我在同一页上有三组这样的按钮怎么办？我需要给它们不同的id并为它们分别编写脚本吗？抱歉，我是一个jQuery新手... - wcdomy

@j08691，你能帮我解决这个问题吗？http://stackoverflow.com/questions/11526200/switch-content-jquery - wcdomy

显示剩余4条评论

2个回答

2

我建议使用类似于这个 jsFiddle 示例 的布局和 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;
}

- j08691

不要使用$(this)，你可以将其缓存并使用。这样可以提高性能（或者你可以使用链式调用，$(this).hide().siblings('.save, .cancel').show();）。 - SaminatorM

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nir · Accepted Answer

您可以添加一个新的“取消”按钮，并根据需要隐藏它。您可以在此处查看演示.

如果需要，以下是代码：

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