使用jQuery和按钮切换可编辑字段和类名（jQuery、HTML、PHP）

我正在尝试使用可编辑字段构建用户配置文件

我的方法是通过单击显示“编辑”的按钮来编辑字段。单击后，jQuery应该

• 更改字段的样式以引起用户的注意
• 允许该字段可编辑
• 将按钮文本更改为“保存”
• 将button类更改为“save”，以便在随后的单击中调用新的jQuery功能

当点击“保存”按钮时，jQuery应该

• 使字段不可编辑
• 删除样式
• 通过AJAX更新数据库（尚未编码）
• 将类更改回“编辑”
• 将按钮文本更改回“编辑”

我的问题是，“编辑”jQuery代码块执行并生成所需的结果，但“保存”代码块在单击时不起作用

开发工具没有显示错误

HTML

<div class="row text-center company">Company Name</div>
<button class="btn btn-default edit">Edit</button>

“保存按钮”JS

$(document).ready(function() {
  $('.edit').click(function() {
    $('.company').attr('contenteditable', 'true').css({
      'border': 'black solid 1px',
      'outline': 'none'
    }).focus();
    $(this).text("Save").addClass('save').removeClass('edit');
  });
});

$(document).ready(function() {
  $('.save').click(function() {
    alert("working!");
    $('.company').attr('contenteditable', 'false').css({
      'border': 'none',
      'outline': 'none'
    });
    $(this).text("Edit").addClass('edit').removeClass('save');
  });
});

---

您可以将它们组合成单个事件并与类一起播放，而不是为

edit

和

save

定义两个单独的事件。您的代码正在添加一个

save

类，您可以使用该类作为条件，更改输入字段并相应地保存。以下是工作代码：

$（'button'）。在（'click'，function（）上{
if（$（this）.hasClass（'save'））{
警报（“已保存！！！”；
$（this）.text（“编辑”）.removeClass（“保存”）；
$（'.company'）.attr（'contenteditable'，'false'）.css({
“边界”：“无”，
“大纲”：“无”
});
}否则{
$（this.text（“Save”）.addClass（“Save”）；
$（'.company'）.attr（'contenteditable'，'true'）.css({
“边框”：“黑色实心1px”，
“大纲”：“无”
}).focus（）；
}
});

公司名称
Edit
您可以将它们组合成单个事件并与类一起玩，而不是为
Edit
和
save
定义两个单独的事件。您的代码正在添加一个
save
类，您可以使用该类作为条件，更改输入字段并相应地保存。以下是工作代码：


$（'button'）。在（'click'，function（）上{
if（$（this）.hasClass（'save'））{
警报（“已保存！！！”；
$（this）.text（“编辑”）.removeClass（“保存”）；
$（'.company'）.attr（'contenteditable'，'false'）.css({
“边界”：“无”，
“大纲”：“无”
});
}否则{
$（this.text（“Save”）.addClass（“Save”）；
$（'.company'）.attr（'contenteditable'，'true'）.css({
“边框”：“黑色实心1px”，
“大纲”：“无”
}).focus（）；
}
});

公司名称
编辑
谢谢米兰，效果非常好。也就是说，我不知道为什么我的原始代码不起作用。从逻辑上讲，这是有道理的，但第二个动作不会运行。不管怎样，谢谢你的帮助。谢谢米兰，这非常有效。也就是说，我不知道为什么我的原始代码不起作用。从逻辑上讲，这是有道理的，但第二个动作不会运行。无论如何，谢谢你的帮助。