个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 21:00:59 27 4
gpt4 key购买 nike

我正在从事 freeCodeCamp“显示本地天气”项目。我几乎所有的东西都在工作，除了我似乎无法在华氏温度和摄氏温度之间切换以正常工作。这是一个显示天气的非常基本的页面，我希望用户能够通过单击标签在华氏度和摄氏度之间切换，然后页面将更新为新温度。目前，当我点击“C”标签时，它会短暂显示正确的温度，但随后会迅速切换回华氏温度。任何帮助将不胜感激。这是页面的链接: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;
    }
  });
}

最佳答案

您的代码中有 2 个问题:

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

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

您使用 === 来设置 tempSwitch，如 tempSwitch === false 但您只需要使用一个 = 如 tempSwitch = false

DEMO

关于javascript - 无法获得在华氏温度和摄氏温度之间切换的按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47143768/

27 4 0
文章推荐： c# - MissingMethodException 未处理
文章推荐： c - %i 或 %d 更喜欢哪一个
文章推荐： c# - 将多维数组的n个随机元素设置为一个值
文章推荐： c - 在C中: How to point to different members with offset at run time?
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com