Question

用户故事：我可以在当前位置看到天气。
用户故事：根据天气的不同，我可以看到不同的图标或背景图像（例如雪山，炎热的沙漠）。
用户故事：我可以按一个按钮在华氏温度和摄氏温度之间切换。

这些是该网站的用户故事。我已经设法完成了1和2，但我完全坚持3，我很清楚如何设法做到这一点，但我无法设法使用各种方法（不仅仅是我的代码）但我想我可能编码很严重，但这是我知道的唯一方法，因为我是新的。有人建议我使用if但它不起作用，因为它只能更改文档加载的文本而不是连续。这是example。关于更好的方式的任何建议将非常感谢和抱歉长篇文章。

HTML：

<div class="main">
  <div class="title">
    <h1>Weather!</h1>
    <hr />
  </div>
  <div class="search">
    <div class="row">
      <div class="col-xs-6">
      <input type="text" class="form-control" placeholder="City">
      </div>
      <div class="col-xs-3">
      <button type="button" class="btn btn-default" id="searchBtn">Search</button>
      </div>
      <div class="col-xs-3 checkbox" id="degrees">
        <label><input type="checkbox" value="" id="fCheck">View in °F</label>
      </div>
    </div>
    <hr />
  </div>
  <div class="row">
    <div class="col-xs-6 content" id="temp">
      <h2></h2>
      <h3></h3>
      <h4></h4>
      <p></p>
      <img src="" alt="weather icon" />
    </div>
    <div class="col-xs-6 info">
      <h2 id="humidity"></h2>
      <h2 id="windspeed"></h2>
      <br>
      <h2 id="sunrise"></h2>
      <h2 id="sunset"></h2>
    </div>
  </div>
</div>

的CSS：

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Dosis', sans-serif;
  background-color: #3f3f3f;
}
.main{
  position: relative;
  margin: 10% auto auto auto;
  width: 75%;
  text-align: center;
  background-color: #8E9EBC;
  padding: 10px;
  border-width: 3px;
  border-style: solid;
  border-color: black;
  border-radius: 5px;
}
.main h1 h2 h3 h4{
  margin: 0;
}

.main img {
  width: 100px;
}
.title hr {
  border-width: 2px;
}

#degrees h4 {
  text-align: left;
}
#searchBtn {
  width: 100%;
}

JS：

$(document).ready(function() {
  var api = "secretAPIKey";

  $.getJSON("http://ip-api.com/json", function(json)  {
    var userCity;
    userCity = JSON.stringify(json.city);
    userCity = userCity.replace(/\"/g,"");    
    makeElementsFromCity(userCity);
  });
  var celsius;
  var name;
  var faren;
function makeElementsFromCity(userCity) {
    $.getJSON("http://api.openweathermap.org/data/2.5/weather?q=" + userCity + "&units=metric&appid=" + api, function(json) {
        name = JSON.stringify(json.name + ", " + json.sys.country);
        celsius = JSON.stringify(json.main.temp);
        faren = celsius * 9 / 5 + 32;
        var icon = JSON.stringify(json.weather[0].icon);
        var type = JSON.stringify(json.weather[0].main);
        var humidity = JSON.stringify(json.main.humidity)
        var windS = JSON.stringify(json.wind.speed);
        var sunR = JSON.stringify(json.sys.sunrise);
        var sunS = JSON.stringify(json.sys.sunset);
        icon = icon.replace(/\"/g,"");
        type = type.replace(/\"/g,"");
        celsius = Math.round(celsius);
        faren = Math.round(faren);
        //get sunset and sunrise unix into time
      function formatSunR(date) {
        var date = new Date(date*1000);
        var hours = date.getHours();
        var minutes = "0" + date.getMinutes();
        var seconds = "0" + date.getSeconds();
        var formattedTime = hours + ':' + minutes.substr(-2);
        return formattedTime;
      };
        //update h2 with city, country and temperature and testing to see what weather.icon is but comes back as undefined
        //updates h3 with the type of weather & city is placeholder for testing the city variable
        $("#temp h3").text(type);
        //display image of weather type from https://openweathermap.org/weather-conditions
        $("#temp img").attr("src", "http://openweathermap.org/img/w/" + icon + ".png");
        $(".info #humidity").text("Humidity: " + humidity + "%");
        $(".info #windspeed").text("Wind Speed: " + windS + " MPH");
        $(".info #sunrise").text("Sunrise: " + formatSunR(sunR));
        $(".info #sunset").text("Sunset: " + formatSunR(sunS));

      if($("#fCheck").is(":checked")) {
        $("#temp h2").text("The temperature in " + name + " is " + faren + "°F");
      } else {
        $("#temp h2").text("The temperature in " + name + " is " + celsius + "°C");
        console.log(faren);
      }
      });

    };


});

Answer 1

您可以尝试此HTML

<a href="#" id="toggle">temp</a>

使用这个JS并根据您的情况进行调整。

        var temp = 25;
        var celsius = temp;
        var fahr = (1.8 * temp + 32);
        var switch_ = new Boolean(false);

        $("#toggle").on("click", function() {
            switch_ = !switch_;
            var temp = switch_ == true ? celsius + " °C" : fahr + " °F";
            $(this).text(temp);
        });

在我当地的天气应用程序中，无法将温度从摄氏温度变为华氏温度

1 个答案: