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

2 回答 2

3

您可以为取消添加一个新按钮，并根据需要将其隐藏。你可以按照这里的演示

这是您需要的代码：

<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');
});
​
于 2012-07-16T19:02:12.127 回答
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();
});

​</p>

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;
}​
于 2012-07-16T20:51:08.513 回答