Question

我遇到的问题是温度按钮似乎只能切换当地天气的摄氏度和华氏度。我希望能够在容器上方和下方点击其他城市。我试图在迪拜的天气中实现这一点，试图让这个工作，但我得到一个奇怪的结果，C变得大写，温度值或文本没有变化。任何人都可以帮助这项工作吗？这已经分类了，我将把它应用到其他城市。我在下面提供了一个Codepen以及我尝试使用它的一些代码。

  function toggleTemp(lat, lon) {
    var weatherAPI =
  "https://fcc-weather-api.glitch.me/api/current?lat=" + lat + "&lon=" + lon;

$.getJSON(weatherAPI, function(data) {
  $(".temp-slider").on("click", function() {
    var tempC = data.main.temp;
    var tempF = tempC * 9 / 5 + 32;

    if (toggleF) {
      $("#weather-degrees").html(Math.round(tempF) + "&deg;F");
      $("#temp-slider-text").html("Fahrenheit");
      toggleF = false;
    } else if (toggleF == false) {
      $("#weather-degrees").html(Math.round(tempC) + "&deg;C");
      $("#temp-slider-text").html("Celsius");
      toggleF = true;
    }
  });
});

}

https://codepen.io/KUBIX90/pen/NwWvNb

Answer 1

您的codepen中的所有内容（主要是）在首次点击迪拜之后运行。

您在该功能中有var toggleF = true;和toggleTemp(25.2, 55.27);，但在其他功能中没有，所以这就是差异点。

然而，执行var toggleF = true会使toggleF与本地变量发生冲突。您应该使用类似toggleF = !toggleF的内容，但由于toggleF在toggleTemp（）中也已更改，因此您应该将其删除。

此外，每次切换学位类型时，toggleTemp功能都会对fcc-weather-api.glitch.me/api/current进行新的调用。如果用户单击按钮的速度比http请求返回的速度快，则可能导致错误。最好将温度保持在变量中，并在用户选择其他位置时仅向API发出新请求。这将使你的学位类型显示变化完全是客户端。

我认为滑块在点击迪拜之后无法工作的原因是你有一个块开始：

$.getJSON(weatherAPI, function(data) {
  $(".slider").on("click", function() {

内部 toggleTemp()函数（仅在迪拜按钮点击事件中调用）。因此，在切换功能至少运行一次之前，它不会附加到.slider类对象的单击上。更糟糕的是，每次点击迪拜时，你都会再次调用它，这样你就可以通过一次单击双重运行其中的代码来获得奇怪的行为。

TL; DR执行以下操作：

在页面准备好后立即自行定义.slider").on("click"函数。
它应该做的唯一事情是反转toggleF并更新GUI
仅在用户切换位置时才从api获取并保存温度。

点击

1 个答案: