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

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

javascript jquery html

Javascript 在可编辑按钮中显示保存底部编辑文本,javascript,jquery,html,contenteditable,Javascript,Jquery,Html,Contenteditable,这是我的密码。我有一条短信。和一个编辑文本的按钮。我想点击编辑按钮，然后显示一个btn作为名称保存。为了保存我的零钱。我该怎么办？帮助我的朋友们 <!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="../../../Editable/css/minified-std-acount.css">

这是我的密码。我有一条短信。和一个编辑文本的按钮。我想点击编辑按钮，然后显示一个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>


无标题文件
$（文档）.ready（函数（e）{
$（“按钮”）。单击（函数（）{
变量$div=$（'div'），
isEditable=$div.is（'.editable'）；
$（'div'）.prop（'contenteditable'，！isEditable）.toggleClass（'editable'））
})
});
.可编辑{背景：#EAEAEA}
某些文本

切换为可编辑

您只需在此处添加一行代码即可：

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

更新

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

要向后切换，只需检查其

文本

，如下所示：

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

随时如果它对你有帮助，一定要把它标记为答案！