Question

这是我的代码。我有一个文字。和一个用于编辑text.i的按钮想要单击编辑按钮然后该时间显示btn作为名称保存。用于保存我所拥有的变化。我该怎么办？帮帮我的朋友

 <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../../../Editable/css/minified-std-acount.css">
    <title>Untitled Document</title>
    <script src="../../../eanjoman/js/jquery-1.10.1.min.js"></script>
    <script>

    $(document).ready(function(e) {

    $('button').click(function(){
    var $div=$('div'),
     isEditable=$div.is('.editable');
     $('div').prop('contenteditable',!isEditable).toggleClass('editable')
     })
     });
     </script>
     <style>
     .editable{ background:#EAEAEA}
     </style>

      </head>

    <body>
    <div>Some text</div><br><br><button>Toggle editable</button>
    </body>
    </html>

Answer 1

你可以在这里添加一行代码：

<强> DEMO

$('button').click(function(){
    var $div=$('div'),
     isEditable=$div.is('.editable');
     $('div').prop('contenteditable',!isEditable).toggleClass('editable')
     $(this).text('Save'); //Add this
})

<强>更新

<强> UPDATED DEMO

要切换回来，只需检查其text，如下所示：

$('button').click(function(){
    var $div=$('div'),
     isEditable=$div.is('.editable');
    $('div').prop('contenteditable',!isEditable).toggleClass('editable')
    if($(this).text()!="Save") //Add this condition
        $(this).text('Save');
    else
        $(this).text('Toggle editable');
})

在可编辑按钮中显示保存底部编辑文本

1 个答案: