可编辑字段（隐藏在其后面的输入）Javascript / jQuery

Question

我正在寻找有关如何改进这段代码的想法。我是相当新的（几个月前开始学习前端）和我一起裸露：）

在我网站的不同位置，用户界面会显示用户可编辑的文字。它现在是如何完成的，是一个带有隐藏输入的文本div，以及一个触发函数的jquery事件，该函数在标题和输入之间切换，将值传递给1，如果值改变则更新另一个。

我有相同逻辑的功能在网站中出现不同的时间，所以除了将它们全部组合成一个以div的名称作为变量之外，它怎么能更好地完成？感觉不干净:)感谢您的任何建议！

以下是一个例子：

function onMouseOverMapDescription(event) {
    $("#mapDescriptionLbl").hide();
    var value = $("#mapDescriptionLbl").text();
    $("#mapDescriptionInput").val(value);
    $("#mapDescriptionInput").show();
    $("#mapDescriptionInput").focus();
    $("#mapDescriptionInput").select();
}

回来的路：

function onMapDescriptionChange(event) {
    $("#mapDescriptionLbl").show();
    var value = $("#mapDescriptionInput").val();
    if (value != "" && value != mapData.description) { 
        $("#mapDescriptionLbl").text(value);
        mapData.description = value;
        beforeSaveMap();
    } else {
        //$("#mapDescriptionLbl").text(mapData.description);
    }
    $("#mapDescriptionInput").hide();
}

使用处理程序：

$("#mapDescriptionLbl").focusin(onMouseOverMapDescription);
$("#mapDescriptionInput").focusout(onMapDescriptionChange);