Javascript 将范围字段更改为输入字段以更新信息
我正在创建一种编辑动态内容的方法。我在这里发现了一个问题，它让我开始将案例中的文本跨度更改为输入字段 目前，我无法解决以下问题。当您单击右侧的“编辑”时，输入字段将替换范围这正是我想要的，但当您在输入字段外部单击时，输入字段将添加新的范围字段，而不是替换输入字段 我希望造型和场地始终保持原样 有人知道我做错了什么吗 var projID=； //获取ID并编辑项目 $document.body.on'click'、'.recEdit'、'[data editable]'，函数{ projID=$this.parent.data'recid'； console.log“项目ID为…”+projID； var$el=$this.parent.children.find'span'； var$input=$.val$el.text； $el.replaceWith$input； var save=函数{ var$p=$.text$input.val； $input.replaceWith$p； }; /** 我们用“one”来定义回调，因为我们知道这一点 元素将在那之后消失，我们不希望 任何回调剩余都会占用内存。 下一次，当'p'变成'input'时，这个回调 将再次应用。 */ $input.one'blur'，save.focus； }; .recentProjectCont{ 宽度：98%； 高度：85px； 边框底部：1px实心ccc； 填充：10px0； 利润率：0.10px； 显示：块； 位置：相对位置； } .最近{ 宽度：100px； 高度：85px； 显示：内联块； 垂直对齐：顶部； } .最近的项目管理{ 宽度：100%； 身高：100%； 对象匹配：覆盖； } 雷普罗金福康先生{ 显示：内联块； 垂直对齐：顶部； 宽度：80%； 身高：100%； 左边距：20px； } .recinfo cont1、.recinfo cont2{ 身高：100%； 显示：内联块； 垂直对齐：顶部； } .recinfo cont1{ 宽度：40%； } .recinfo cont2{ 宽度：52%； 文本对齐：右对齐； } .recBaseFormat、.ProjectView{ 字母间距：.1rem； 线高：1.4em； 颜色：2F； 显示：块； 边缘底部：5px； } .recProjName{ 字号：1.1rem； 字体系列：“Muli”，无衬线； } .recinfo.stat、.projectview{ 字体大小：.7rem； 字体系列：“Nunito”，无衬线； } .重新编辑{ 位置：绝对位置； 最高：20%； 左：97%； 光标：指针； } 名称 中高音 类别 地位 造物主 编辑Javascript 将范围字段更改为输入字段以更新信息,javascript,jquery,replace,Javascript,Jquery,Replace,我正在创建一种编辑动态内容的方法。我在这里发现了一个问题，它让我开始将案例中的文本跨度更改为输入字段 目前，我无法解决以下问题。当您单击右侧的“编辑”时，输入字段将替换范围这正是我想要的，但当您在输入字段外部单击时，输入字段将添加新的范围字段，而不是替换输入字段 我希望造型和场地始终保持原样 有人知道我做错了什么吗 var projID=； //获取ID并编辑项目 $document.body.on'click'、'.recEdit'、'[data editable]'，函数{ projID=
这段代码当然可以优化，但它应该让您朝着正确的方向前进。您的代码有一些问题。我上面提到的问题是，选择器只针对父元素中的最后一个span元素。我们可以通过在父级中的每个跨度上使用to循环来解决这个问题。另一个问题是，当您用输入替换它们时，您正在丢失跨度的类。我已经解决了这个问题，在用输入替换它们之前，为每个跨度保存一个类列表，以便在它们转换回跨度时可以重新应用它们。最后，您在任何输入模糊时为所有输入启动了保存功能，这意味着用户只能编辑一个范围，然后当他们单击“退出”时，所有输入都将被转换回。相反，现在它只会在您取消聚焦每个特定输入时转换回来 var projID=； //获取ID并编辑项目 $document.body.on'click'、'.recEdit'、'[data editable]'，函数{ projID=$this.parent.data'recid'； console.log“项目ID为…”+projID； $this.parent.children.find'span'。每个函数{ var classList=$this.attr'class'； $input=$.val$this.text； $this.replace为$input； $input.on'blur'，函数{ $this.replaceWith+$this.val+； }; }; }; .recentProjectCont{ 宽度：98%； 高度：85px； 边框底部：1px实心ccc； 填充：10px0； 利润率：0.10px； 显示：块； 位置：相对位置； } .最近{ 宽度：100px； 高度：85px； 显示：内联块； 垂直对齐：顶部； } .最近的项目管理{ 宽度：100%； 身高：100%； 对象匹配：覆盖； } 雷普罗金福康先生{ 显示：内联块； 垂直对齐：顶部； 宽度：80%； 身高：100%； 左边距：20px； } .recinfo cont1、.recinfo cont2{ 身高：100%； 显示：内联块； 垂直对齐：顶部； } .recinfo cont1{ 宽度：40%； } .recinfo cont2{ 宽度：52%； 文本对齐：右对齐； } .recBaseFormat、.ProjectView{ 字母间距：.1rem； 线高：1.4em； 颜色：2F； 显示：块； 边缘底部：5px； } .recProjName{ 字号：1.1rem； 字体系列：“Muli”，无衬线； } .recinfo.stat、.projectview{ 字体大小：.7rem； 字体系列：“Nunito”，无衬线； } .重新编辑{ 位置：绝对位置； 最高：20%； 左：97%； 光标：指针； } 名称 中高音 类别 地位 造物主 编辑
每次单击都可以使用contenteditable属性切换 代码似乎正在运行，问题是这一行：var$el=$this.parent.children.find'span'；只针对最后一个span ele
在容器内的容器。这就是为什么无论在哪个输入中更改文本，只有最后一个输入会被包含该文本的范围所替换。研究使用jQuery循环每个跨度。@APAD1有什么想法吗？更新了我的评论，基本上你需要循环每个跨度。你考虑过使用contenteditable属性吗？@APAD1我会使用什么作为选择器？我试着把跨度放进去，但这得到了所有的跨度。为了减少问题中的代码量，我删除了一些html。html由循环结果组成，因此您在html中看到的是x10。这就是为什么我要用这个$this.parent.children.find“span”谢谢你的回答和解释。这是个完美的问题。假设用户输入文本并意识到他们想要回原始文本，您知道是否有办法清除更改吗？一种可能是，当用户单击“编辑”时，将初始值存储在或中，然后您需要另一个名为“重置”的按钮或类似的按钮，然后您可以从localStorage或cookie还原初始值。