切换div

Question

我正在尝试切换div，以便在点击时将温度转换为华氏温度，再次点击时它将恢复到最初由api拉入的摄氏温度读数。

当我只处理数字时代码有效：

var fahrenheit = (data.main.temp * 1.8 + 32).toFixed(2);
var celsius = data.main.temp; 

$("#temp").on("click", function() {
$("#temp").html($("#temp").html() == fahrenheit ? celsius : fahrenheit)

});

但是当我尝试向html添加文本时它不起作用，它会转换为华氏转换，但在再次点击时不会切换回来。

var fahrenheit = (data.main.temp * 1.8 + 32).toFixed(2);
var celsius = data.main.temp;

$("#temp").on("click", function() {
$("#temp").html($("#temp").html() == fahrenheit + "&deg F" ? celsius + "&deg C" : fahrenheit + "&deg F")

});

我对此感到有点难过。我已经进行了搜索，但我似乎无法找到符合我想要的解决方案。

感谢您的帮助。

以下是我codepen

的链接

Answer 1

您的问题在于通过JavaScript onclick检查。

当你检查它时，你使用的是JavaScript而不是使用度数的HTML实体，你应该只使用度数char：

改变这个：

$("#temp").html($("#temp").html() == fahrenheit + "&deg F" ? celsius + "&deg C" : fahrenheit + "&deg F")

到此：

$("#temp").html($("#temp").html() == fahrenheit + "° F" ? celsius + "° C" : fahrenheit + "° F" )

Answer 2

您必须检查当前是否以摄氏度显示，然后根据

做出决定

$("#temp").on("click", function() {
  var isCelsius = $(this).html().indexOf('C') > -1;
  $('#temp').html(isCelsius ? celsius + '&deg C' : fahrenheit + '&deg F');
});

Answer 3

当您使用html（）获取值时，您将获得解析HTML，因此您没有&deg HTML实体但已解析的值。

要修复代码，您可以比较度实体的十六进制值。

$("#temp").on("click", function() {
  $("#temp").html($("#temp").text() == fahrenheit + "\xB0 F" ? celsius + "\xB0 C" : fahrenheit + "\xB0 F")
});

Answer 4

您可以仅比较数字（不包括最后3'°F或°C'字符）。

var fahrenheit = (data.main.temp * 1.8 + 32).toFixed(2);
var celsius = data.main.temp;

$("#temp").on("click", function() {
  var numberOnly = $("#temp").html().length - 3;
  $("#temp").html($("#temp").html().substring(0, numberOnly) == fahrenheit ? celsius + "&deg C" : fahrenheit + "&deg F");
});