javascript - 单击时更改内部 html，然后使用 Jquery 或 JS 更改回单击

Question

我自学了几个月，把this一起在我使用的平台之一上进行在线挑战。 我已经成功地在单击时使用 Jquery 更改了元素的内部 HTML，但不知道如何将其更改回单击时的内容。

如何才能使第一次单击 .button 以一种方式更改 HTML，然后声音单击将其更改回来，并且可以重复交互而无需重新加载页面？

// curent temp, day high and day low
  var temp = json.main.temp.toFixed(1);
  var tempLo = json.main.temp_min.toFixed(1);
  var tempHi = json.main.temp_max.toFixed(1);
  //temperatures converted to farenheit
  var tempF = (temp * (9 / 5) + 32).toFixed(1);
  var tempLoF = (tempLo * (9 / 5) + 32).toFixed(1);
  var tempHiF = (tempHi * (9 / 5) + 32).toFixed(1);
  //default temperature display in celcius on document ready
  $(".temp").html(temp + "°C");
  $(".temp-low").html(tempLo + "°C");
  $(".temp-high").html(tempHi + "°C");

  $(".button").click(function(){
    $(".temp").html(tempF+ "°F");
    $(".temp-low").html(tempLoF+ "°F");
    $(".temp-high").html(tempHiF+ "°F");
  });

有关更多上下文，请参阅上面的链接。

Answer 1

您只需记住旧值(当我正确理解您的代码时，就不需要这样做，因为这两个值已经存储在 tempX 变量中)并使用触发器来检查当前显示的值:

var celsius = false;
$(".button").click(function(){
  if(celsius) {
    $(".temp").html(tempF+ "°F");
    $(".temp-low").html(tempLoF+ "°F");
    $(".temp-high").html(tempHiF+ "°F");
  } else {
    $(".temp").html(temp+ "°C");
    $(".temp-low").html(tempLo+ "°C");
    $(".temp-high").html(tempHi+ "°C");
  }
  celsius = !celsius;
});