Javascript 类似jQuery函数来转换温度；但其中一个不起作用

我正在为你做天气应用程序项目。我有两个类似的jQuery函数，它们将温度从开尔文转换为摄氏度，从开尔文转换为华氏度。这是我的建议

当我单击Celcius图标时，它将值和图标转换为华氏温度；但当我点击华氏按钮时，它什么也不做

功能如下-

$("#c").click(function() {
  var fahrenheit = ((temp - 273.15) * 9 / 5) + 32;
  $("#temp").html(fahrenheit);
  $("#c").html(" °F");
  $("#c").attr("id", "f");
});

$("#f").click(function() {
  var celcius = temp - 273.15;
  $("#temp").html(celcius);
  $("#f").html(" °C");
  $("#f").attr("id", "c");
});

我试图通过将输出打印到控制台来逐步调试代码。我还检查了id属性是否也在更改

---

这里可能出了什么问题？

单击按钮后，您正在将c的id更改为f。这意味着当您将click事件绑定到f时，页面上没有与选择器匹配的元素

处理此问题的标准方法是从页面上静态的父元素委派事件

委托时，您将事件绑定到父元素，jQuery使用事件冒泡来检测您正在单击的元素，并且使用它自己的事件系统将触发针对动态元素的事件

$('body').on('click', '#f', function(e) {
  var celcius = temp - 273.15;
  $("#temp").html(celcius);
  $("#f").html(" °C");
  $("#f").attr("id", "c");
});

---

使用on方法中的第二个参数，您可以指定要委托给的子元素的选择器。

单击按钮后，您正在将c的id更改为f。这意味着当您将click事件绑定到f时，页面上没有与选择器匹配的元素

处理此问题的标准方法是从页面上静态的父元素委派事件

委托时，您将事件绑定到父元素，jQuery使用事件冒泡来检测您正在单击的元素，并且使用它自己的事件系统将触发针对动态元素的事件

$('body').on('click', '#f', function(e) {
  var celcius = temp - 273.15;
  $("#temp").html(celcius);
  $("#f").html(" °C");
  $("#f").attr("id", "c");
});

---

使用on方法中的第二个参数，可以指定要委托给的子元素的选择器。

正在运行的javascript只运行一次。这意味着您将第一个事件处理程序绑定到c，然后尝试将第二个事件处理程序绑定到f，但问题是，当此代码运行时，f还不存在，因此没有绑定任何内容

---

你需要重构你的代码以获得你想要的效果。与其更改ID，不如保持ID不变

您正在运行的javascript只运行一次。这意味着您将第一个事件处理程序绑定到c，然后尝试将第二个事件处理程序绑定到f，但问题是，当此代码运行时，f还不存在，因此没有绑定任何内容

---

你需要重构你的代码以获得你想要的效果。与其更改ID，不如保持ID不变

正是由于这个原因，在加载元素后更改其ID是一个坏主意。jQuery加载脚本，将事件处理程序附加到ID为c的元素。它尝试向ID为f的元素添加事件处理程序，但未找到它。所以它永远不会得到第二次点击事件。使用事件委派，或者更好的做法是，保持id不变并更改文本。同意上述意见-最好使用一键式处理程序函数，在C&F w/o之间切换操作idIt。加载元素后更改其id是个坏主意，正是因为这个原因。jQuery加载脚本，将事件处理程序附加到ID为c的元素。它尝试向ID为f的元素添加事件处理程序，但未找到它。所以它永远不会得到第二次点击事件。使用事件委派，或者更好的做法是，保持id不变并更改文本。同意上述意见-您最好使用一次单击处理程序函数在C&F和o之间切换，将id作为注释进行操作，您还必须更改C的单击绑定以及注释，您还必须更改c的单击绑定