Jquery 将文本标记替换为输入字段不使用replaceWith（）

这只是一个简单的编辑。我想更改标题，因此如果我要单击“编辑”图标，那么标题将更改为文本字段，“编辑”图标将更改为“保存”图标

$（'#editheader'）。单击（函数（e）{
var category=$（this）.closest（“h3”）.text（）；
$（此）。替换为（“”）；
$（此）。最近的（“h3”）。替换为（“”）；
e、 预防默认值（）；
});

给投资者的信
税务文件
我在html标记中添加了一个表单，并制作了这个

    $('#editheader').click(function(e){

        var category = $(this).closest("h3").text();   

        $(this).hide();
        $(this).closest("h3").hide();

        $('#editForm').show();
        $('input[name=category]').val(category);     

        //$( this ).replaceWith( "<a href=''> <i class='fa fa-save' aria-hidden='true' style='color:green'></i> </a>"  );
        //$( this ).closest("h3").replaceWith( "<input value='" + category + "' >" );        

        e.preventDefault();
    });
</script>


$（'editheader'）。单击（函数（e）{
var category=$（this）.closest（“h3”）.text（）；
$（this.hide（）；
$（this）.closest（“h3”）.hide（）；
$（'#editForm'）.show（）；
$（'input[name=category]'）.val（category）；
//$（此）。替换为（“”）；
//$（此）。最近的（“h3”）。替换为（“”）；
e、 预防默认值（）；
});
这是因为replaceWith（）删除了您所引用的元素！
只需切换线路即可解决此问题


$（'.editheader'）。单击（函数（e）{
e、 预防默认值（）；
设$h3=$（this）；
让category=$（this）.closest（“h3”）.text（）；
$h3.toggleClass（'edit'）；
如果（$h3.hasClass（'edit'））{
const newCategory=$h3.children（'input'）.val（）；
$h3.children（'input'）.remove（）；
$h3.儿童（'span'）。文本（新类别）；
}否则{
$h3.儿童（'span'）。文本（''）；
$h3.前置（“”）；
$（this）.children（'i'）.removeClass（'fa-pencil'）.addClass（'fa-save'）；
}
});

给投资者的信
税务文件
您可以通过以下方式改进代码：


不要对按钮使用相同的
id
，因为id必须是唯一的，更改为classname
不要替换
a
标记，只需更改图标的类别即可
使用
span
轻松定位
h3
使用类作为标志以了解它是编辑还是保存


$（'.editheader'）。单击（函数（e）{
if（！$（this）.hasClass（'save'））{
var category=$（this.sibbines（“span”）.text（）；
$（this）.sillides（'span'）。替换为（“”）；
}否则{
var category=$（this.sibbines（“输入”）.val（）；
$（this）.sides（'input'）。替换为（“+category+”）；
}
$（this.toggleClass（'save'）；
$（'i'，this）.toggleClass（'fa-save-fa-pencil'）；
e、 预防默认值（）；
});

给投资者的信
税务文件
首先，通过子元素更改父元素是有问题的。解决方案是将要更改的文本放入另一个占位符元素（如span）中，然后将其替换为所需的输入元素

另一个问题是用另一个元素替换元素a href，而后续代码取决于原始元素。只是更改了JQuery代码的顺序，使其按逻辑顺序执行

最后，a href的ID是相同的。改用类



$（'.editheader'）。单击（函数（e）{
var category=$（this）.closest（“h3”）.text（）；
$（this）.prev（）替换为（“”）；
$（此）。替换为（“”）；
e、 预防默认值（）；
});

给投资者的信
税务文件
我认为这是可行的$（这个）$（this）.最近的（“h3”）.hide（）$（“#editForm”）.show（）；但是按钮不见了。我想切换“save”按钮eah，因为replaceWith（）会删除
h3
中的所有内容。