jQuery replaceWith方法失效：温度单位切换功能无响应

我看了你的代码逻辑，很快就发现了两个核心问题：

• 用replaceWith()替换元素后，原#temp节点会被彻底删除，后续点击按钮时根本找不到这个元素，自然没法更新温度内容
• 直接覆盖temp变量，导致第二次切换时没有原始温度值可以做正确计算

修复方案 #

1. 保留#temp元素，只修改内部内容
   把$("#temp").replaceWith(temp);改成$("#temp").text(temp);（如果需要带格式也可以用html()），这样只是更新元素里的文本，元素本身还留在DOM结构中，后续操作能正常定位到它。

2. 保存原始温度值
   不要直接修改temp变量，单独声明一个originalTemp来存储初始的摄氏度数值，每次切换温度都基于这个原始值计算，避免多次切换后数值越算越乱。

修改后的完整代码片段 #

$(document).ready(function(){
  var lat, lon, temp, originalTemp; // 新增变量保存原始温度
  var isCelsius = true;

  // 假设这里已经通过接口获取到了摄氏度温度，赋值给两个变量
  // 比如 originalTemp = temp = 22;

  $("#fahrenheit").click(function() {
    if(isCelsius) {
      // 基于原始温度计算华氏度
      temp = Math.round(originalTemp * 9/5 + 32);
      $("#temp").text(temp); // 用text()替换replaceWith()
      isCelsius = false;
    }
    console.log(temp);
  });

  $("#celsius").click(function() {
    if(!isCelsius) {
      temp = originalTemp; // 直接还原为原始摄氏度值
      $("#temp").text(temp);
      isCelsius = true;
    }
    console.log(temp);
  });
});

为什么replaceWith不行？ #

replaceWith()的作用是把选中的元素整个替换成新内容，比如你原来的DOM是<span id="temp">22</span>，执行$("#temp").replaceWith(71.6)后，DOM就变成了纯文本71.6，#temp这个元素彻底消失了。下次再点击按钮时，$("#temp")找不到任何匹配的元素，代码自然就没效果了。

而text()只是修改元素内部的文本内容，元素本身的结构和ID都保留着，所以每次点击都能正常更新温度显示。

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