Fatal编程技术网
  • javascript/
  • Javascript 无法获取在华氏温度和摄氏温度之间切换的按钮

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

javascript jquery

Javascript 无法获取在华氏温度和摄氏温度之间切换的按钮,javascript,jquery,Javascript,Jquery,我正在做freeCodeCamp“显示当地天气”项目。我几乎所有的东西都在工作，除了我似乎无法让开关在华氏温度和摄氏温度之间切换以正常工作。这是一个显示天气的非常基本的页面，我希望用户能够通过点击标签在华氏温度和摄氏温度之间切换，然后页面将更新为新的温度。目前，当我点击“C”标签时，它会在短时间内显示正确的温度，但随后会快速切换回华氏温度。任何帮助都将不胜感激。以下是该页面的链接： 提前感谢大家 HTML <body> <div class="container weathe

我正在做freeCodeCamp“显示当地天气”项目。我几乎所有的东西都在工作，除了我似乎无法让开关在华氏温度和摄氏温度之间切换以正常工作。这是一个显示天气的非常基本的页面，我希望用户能够通过点击标签在华氏温度和摄氏温度之间切换，然后页面将更新为新的温度。目前，当我点击“C”标签时，它会在短时间内显示正确的温度，但随后会快速切换回华氏温度。任何帮助都将不胜感激。以下是该页面的链接：

提前感谢大家

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>
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;
    }
  });
}

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 apiOpen=“d32fada3b37530ca403693700ae6c134”；
var映射；
var-tempSwitch=false；
$（文档）.ready（函数（）{
getLocation（）；
});
//获取用户的位置
函数getLocation（）{
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
纬度=位置坐标纬度；
经度=position.coords.longitude；
getWeather（）；
initMap（）；
});
}否则{
警报（“请允许位置服务”）
}
}
//检索天气
函数getWeather（）{
数据=$.ajax（{
键入：“获取”，
url:url，
数据类型：“jsonp”，
成功：函数（json）{
当前=华氏温度（json.main.temp）；
低=华氏温度（json.main.temp_min）；
高=华氏温度（json.main.temp_max）；
$（“#location”）.html（“+json.name+”Weather”）；
$（“#currentTemp”）.html（“+current+”°；“+”）；
$（“#图标”）.html（“”）；
$（“#description”）.html（“+json.weather[0].description.toUpperCase（））+”；
$（“#lowTemp”）.html（“↓；”低+”°；“+”）；
$（“#highTemp”）.html（“↑；”高+”°；“+”）；
$（“#湿度”）.html（“湿度：+json.main.湿度+“%”）；
}
});
开关温度（）；
}
//创建地图
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
中心：{lat:41.505493，lng:-81.681290}，
缩放：10
});
}            
//转换温度
函数华氏度（凯尔）{
变量f=数学层（9/5*（凯尔-273）+32）；
返回f；
}
函数fahr（c）{
var fahr=数学楼层（c*1.8+32）；
返回法赫；
}
函数摄氏度（f）{
变量c=数学楼层（（f-32）*5/9）；
返回c；
}
//开关温度
函数switchTemp（）{
$（“#c”）。在（“单击”，函数（）{
if（tempSwitch===false）{
$（“#currentTemp”）.html（“+摄氏度（当前）+”°；“+”）；
$（“#低温”）.html（↓；“+摄氏度（低）+”°；“+”）；
$（“#highTemp”）.html（↑；“+摄氏度（高）+”°；“+”）；
tempSwitch===true；
}
});
$（“#f”）。在（“单击”，函数（）{
如果（临时开关===真）{
$（“#currentTemp”）.html（“+fahr（current）+”°；“+”）；
$（“#lowTemp”）.html（↓；“+fahr（low）+”°；“+”）；
$（“#highTemp”）.html（↑；“+fahr（high）+”°；“+”）；
tempSwitch===false；
}
});
}
您的代码中有两个问题：

您的
C
和
F
是一个链接，因此当您单击它时，页面会重新显示，因为您在
href=“”
中没有任何内容。使用
href=“#”
或
e.preventDefault（）如下例所示：


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


您可以使用
==
设置
临时开关
，如
临时开关===false
中所示，但您只需要使用一个
=
，如
临时开关=false


非常感谢您。我花了很多时间想弄清楚可能是什么。你把我从头痛中救了出来。谢天谢地，这是一个简单的解决办法。

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