Question

我正在使用freeCodeCamp＆＃34;显示当地天气＆＃34;项目。我几乎一切都在工作，除了我似乎无法在华氏温度和摄氏温度之间切换以正常工作。它是显示天气的非常基本的页面，我希望用户能够通过单击标签在华氏度和摄氏度之间切换，然后页面将使用新的温度进行更新。目前，当我点击“C＆＃39;标签它会在短时间内显示正确的温度，但随后快速切换回华氏温度。任何帮助将不胜感激。以下是该页面的链接：https://codepen.io/spencerj171/full/yzmmvR/

提前感谢大家！

HTML

<body>
 <div class="container weather">
  <div id="location"></div>
  <div class="row">
   <div class="col-lg-6">
    <br><br>
    <span class="ftemp" id="currentTemp"></span>
    <span id="forc"><a href="" class="switch" id="f"> F</a> | <a href="" class="switch" id="c">C</a></span>
   <div>
    <span id="icon"></span>
    <span id="description"></span>
   </div>      
    <span class="ftemp" id="lowTemp"></span>
    <span class="ftemp" id="highTemp"></span>
    <div id="humidity"></div>
   </div>
  <div class="col-lg-6">
   <div id="map"></div>
  </div>
 </div>
</body>

CSS

body{
 background-color: rgb(152, 157, 165);
 color: black;
}
.switch{
  border: none;
  background-color: rgb(255, 255, 255);
  text-decoration: none;
}
.weather{
  text-align: center;
  margin-top: 100px;
  background-color: rgb(255, 255, 255);
  border-radius: 5px;
  padding: 50px 50px 50px 50px;
  width: 50%;
  height: auto;
  position: relative;
}
#location{
  font-size: 2em;
  padding-bottom: .5em;
}
#currentTemp{
  font-size: 1.5em;
  display: inline-block;
}
#forc{
  color: black;
  display: inline-block;
  font-size: 1em;
}
#icon{
  width: 100%;
  height: auto;
}
#description{
  display: inline-block;
}
#lowTemp{
  display: inline-block;
  padding-right: 10px;
}
#highTemp{
  display: inline-block;
}
#humidity{

}
#map{
  width: 100%;;
  height: 300px;
  margin: auto;
}
a.switch{
  text-decoration: none;
  color: black;
}
a:hover{
  color: rgb(0, 182, 255);
}

的JavaScript

var url = "https://api.openweathermap.org/data/2.5/weather?q=cleveland&appid=d32fada3b37530ca403693700ae6c134";
var gurl = "https://maps.googleapis.com/maps/api/js?key=AIzaSyCrBes2R9nOEvbMHMoJ4oCTzSNGaOD6eQc&callback=initMap";
var degree = '<span id="forc"><a href="" class="switch" id="f"> F</a> | <a href="" class="switch" id="c">C</a></span>';
var apiOpen = "d32fada3b37530ca403693700ae6c134";
var map;
var tempSwitch = false;

$(document).ready(function(){
  getLocation();
});

//Get location of user
function getLocation(){
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      latitude = position.coords.latitude;
      longitude = position.coords.longitude;
      getWeather();
      initMap();
    });
  } else{
    alert("Please allow location services.")
  }
}

//Retrieve weather
function getWeather(){
  data = $.ajax({ 
    type: "GET",
    url: url,
    dataType: 'jsonp',
    success: function(json){
      current = fahrenheit(json.main.temp);
      low = fahrenheit(json.main.temp_min);
      high = fahrenheit(json.main.temp_max); 

      $("#location").html("<div id='location'>" + json.name + " Weather</div>");
      $("#currentTemp").html("<span class='ftemp' id='currentTemp'>" + current + "&deg;" + "</span>");
      $("#icon").html("<span id='icon'><img src='https://openweathermap.org/img/w/" + json.weather[0].icon + ".png'></span>");
      $("#description").html("<span id='description'>" + json.weather[0].description.toUpperCase()) +"</span>";
      $("#lowTemp").html("<span class='ftemp' id='lowTemp'>&#x2193; " + low + "&deg; " +  "</span>");
      $("#highTemp").html("<span class='ftemp' id='highTemp'>&#x2191; " + high + "&deg; " + "</span>");
      $("#humidity").html("<div id='humidity'>Humidity: " + json.main.humidity + "%</div>");
    }
  });
  switchTemp();
}

//Create Map
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.505493, lng: -81.681290},
    zoom: 10
  });
}            

//Convert temperature
function fahrenheit(kel){
  var f = Math.floor(9/5 * (kel - 273) + 32);
  return f;
}
function fahr(c){
  var fahr = Math.floor( c * 1.8 + 32);
  return fahr;
}
function celsius(f){
  var c = Math.floor((f - 32) * 5/9);
  return c;
}

//Switch temperature
function switchTemp(){
  $("#c").on("click", function(){
    if(tempSwitch === false){
      $("#currentTemp").html("<span id='currentTemp'>" + celsius(current) + "&deg;" + "</span>");
      $("#lowTemp").html("<span id='lowTemp'>&#x2193; " + celsius(low) + "&deg; " +  "</span>");
      $("#highTemp").html("<spanid='highTemp'>&#x2191; " + celsius(high) + "&deg; " + "</span>");
      tempSwitch === true;
    }
  });
  $("#f").on("click", function(){
    if(tempSwitch === true){
      $("#currentTemp").html("<span id='currentTemp'>" + fahr(current) + "&deg;" + "</span>");
      $("#lowTemp").html("<span id='lowTemp'>&#x2193; " + fahr(low) + "&deg; " +  "</span>");
      $("#highTemp").html("<spanid='highTemp'>&#x2191; " + fahr(high) + "&deg; " + "</span>");
      tempSwitch === false;
    }
  });
}

Answer 1

您的代码中存在2个问题：

您C和F是一个链接，因此当您点击它时会重新页面，因为href=""中没有任何内容。使用href="#"或e.preventDefault();，如下例所示：

$("#f").on("click", function(e){
  e.preventDefault();
});

您使用===将tempSwitch设置为tempSwitch === false，但您只需使用=中的一个tempSwitch = false

DEMO

无法获得按钮在华氏温度和摄氏温度之间切换

1 个答案: