jQuery调用after()在输入框后追加文本无法替换原有文本问题求解

你遇到的文本叠加问题，核心原因是jQuery的.after()方法只会在目标元素后方追加新内容，不会自动删除此前插入的旧单位文本，多次触发事件就会不断叠加内容。

方案1：直接清除后方文本节点（简单适配现有逻辑） #

function convertUnits(obj) {
  // 先移除input后面紧跟的旧文本节点
  if ($(obj).next().length) {
    $(obj).next().remove();
  }
  if($(obj).is(":checked")){
    $(obj).after(' "');
  }else{
    $(obj).after(' mm');
  }
}

方案2：用带标识的容器包裹单位（稳定性更高，不会误删其他元素） #

这种方案把单位文本放在固定类名的span内，后续定位删除更精准，适合input后方还有其他元素的场景：

function convertUnits(obj) {
  // 移除之前插入的单位容器
  $(obj).next('.unit-tip').remove();
  const unitText = $(obj).is(":checked") ? ' "' : ' mm';
  // 新单位插入到带标识的span中
  $(obj).after(`<span class="unit-tip">${unitText}</span>`);
}

如果需要批量处理convInputs数组内的所有输入框，遍历的时候套用相同的清除+插入逻辑即可：

function convertUnits(obj) {
  const targetUnit = $(obj).is(":checked") ? ' "' : ' mm';
  convInputs.forEach(input => {
    $(input).next('.unit-tip').remove();
    $(input).after(`<span class="unit-tip">${targetUnit}</span>`);
  })
}

原有HTML代码无需修改，直接替换JS逻辑即可生效。

内容的提问来源于stack exchange，提问作者JoMojo