Question

我在为FreeCodeCamp做天气应用程序项目。我有两个类似的jQuery函数，将温度从Kelvin转换为Celcius，Kelvin转换为Fahrenheit。这是link to my CodePen。

当我点击Celcius图标时，它会将值和图标转换为Fahrenheit;但是当我点击华氏温度按钮时，它什么也没做。

功能如下 -

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

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

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

这里可能出现什么问题？

Answer 1

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

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

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

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

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

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

1 个答案: