Question

$('.btn').on("click", function() {
  var text = $(this).text();
  $(this).text(text === 'Celsius' ? 'Fahrenheit' : 'Celsius');
  changeUnits();
});

function changeUnits(Temp, c) {
  if ($('.btn').text() === 'Celsius')   
    return Math.round((Temp - 273.15)*10)/10 + " &degC";
  else
  return Math.round(((Temp* (9/5)) - 459.67)*10)/10 + " &degF";
}

我正在尝试使用click事件上的按钮来更改临时显示，但它似乎不像这样工作。无论如何，该功能始终保持摄氏度。我也尝试了$（this）.html。按钮的文本实际上正在改变，只是函数没有更新。我尝试在按钮单击内部运行更改单元功能，即使它仍然没有更新。

我不了解这个onclick事件，我怎样才能让它工作。

JS代码：

    var apiKey = "get your own key from http://openweathermap.org";

  function changeUnits(Temp, c) {
  if ($('.btn').text() === 'Celsius')   
    return Math.round((Temp - 273.15)*10)/10 + " &degC";
  else
  return Math.round(((Temp* (9/5)) - 459.67)*10)/10 + " &degF";
}

$('.btn').on("click", function() {
  var text = $(this).text();
  $(this).text(text === 'Celsius' ? 'Fahrenheit' : 'Celsius');
  changeUnits();
});

$(function() {
  var loc;
  //api call to get lat and long
  $.getJSON('http://ipinfo.io', function(data) {
    loc = data.loc.split(",");

    //weather API call
    $.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' +
      loc[0] + '&lon=' + loc[1] + '&appid=' + apiKey,
      function(weather) {
        var currentLocation = weather.name;
        var currentConditions = weather.weather[0].description;
        var currentTemp = changeUnits(weather.main.temp);
        var high = changeUnits(weather.main.temp_max);
        var low = changeUnits(weather.main.temp_min);
        var currentWind = weather.wind.speed;
        var currentWdir = weather.wind.deg;
        var sunRise = weather.sys.sunrise;
        var sunSet = weather.sys.sunset;
        var icon = weather.weather[0].icon;
        //set HTML elements for weather info
        $('#currentLocation').append(currentLocation);
        $('#currentTemp').html(currentTemp);
        $('#high-low').html('<span id="high">High: ' + high + '</span><br>' 
                            + '<span id="low">Low: ' + low + '</span>');
        $('#currentConditions').html(currentConditions);

        var iconSrc = "http://openweathermap.org./img/w/" + icon + ".png";
        $('#currentConditions').prepend('Outside the current conditions are <br><img id="weatherImg"src="' + iconSrc + '"><br>');
      });
  });
});

HTML：

<html>
<head>
    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript,width=device-width,initial-scale=1">
    <title></title>
</head>
<body>
  <div id="header">
    <div class="left"><h1 id="currentLocation">Your Current Location is  </h1></div>
    <div class="navbar"></div>
    <div class="right"><a href="https://github.com/Maverick494"><i class="fa fa-github bigger_icon"></i></a></div>
  </div>
  <div id="container">
    <h2 class="text-center content-title" id="currentTemp"></h2>
    <div class="content-body text-center">
      <p id="high-low"></p>
      <button data-text-swap="Fahrenheit" id="unitButton" type="button" class="btn btn-success">Celsius</button>
      <p id="currentConditions"></p>
    </div>
  </div>
</body>
</html>

我做了我能想到的每一个改变。 onclick中的console.log（el.text（））清楚地显示了文本的变化;但是当我在onclick期间再次运行该函数时，changeUnits的函数似乎永远不会在if语句中找到它。

Answer 1

您没有调用该函数，请在代码中读取注释此外，您不会将任何信息传递给传递给文本方法的函数中的“.btn”。

$('.btn').on("click", function() {
  var text = function(f, c) {  // where are you getting your f and c parameters?
        console.log(f); // should be undefined
        console.log(c); // should be undefined
        return c === 'Celsius' ? 'Fahrenheit' : 'Celsius';
      }();
  console.log(text); // should be 'Celsius'
  $(this).text(text);   // changed from })  to }())
});


function changeUnits(Temp, c) {
  if ($('.btn').text() === 'Celsius')   //  change html() to text() as well
    return Math.round(Temp - 273.15) + " &degC";
  else
  return Math.round((Temp* (9/5)) - 459.67) + " &degF";
}

另外，您应该使用ID来关联按钮以执行此操作

<input id='thisID'>
// then call it in javascript
$("#thisID")

切换按钮

$('.btn').on("click", function() {
  var text = $(this).text();
  $(this).text(text === 'Celsius' ? 'Fahrenheit' : 'Celsius');
});

Answer 2

您似乎正在使用html()而不是text()。我假设你正在寻找按钮文本而不是html，所以试试这个：

$('.btn').on("click", function() {
  $(this).text(function(f, c) {
    return c === 'Celsius' ? 'Fahrenheit' : 'Celsius';
  });
});

function changeUnits(Temp, c) {
  if ($('.btn').text() === 'Celsius'){
    return Math.round(Temp - 273.15) + " &degC";
  }else{
    return Math.round((Temp* (9/5)) - 459.67) + " &degF";
  }
}

Answer 3

以下是我认为你的问题。我没有测试它，因为我需要获取天气API和东西。通过查看您的代码，这就是我得到的。

当页面加载时，您将从OpenWeatherMap获取天气数据。但是，您不会在某种全局变量中兑现此信息，以便以后访问它。您已经在ajax回调中声明了所有变量，并且以后无法访问它们。

尝试这样做：

var currentTemp;
var high;
var low;

$(function() {
  var loc;
  //api call to get lat and long
  $.getJSON('http://ipinfo.io', function(data) {
    loc = data.loc.split(",");

    //weather API call
    $.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' +
      loc[0] + '&lon=' + loc[1] + '&appid=' + apiKey,
      function(weather) {
        var currentLocation = weather.name;
        var currentConditions = weather.weather[0].description;
        currentTemp = weather.main.temp;
        high = weather.main.temp_max;
        low = weather.main.temp_min;
        var currentWind = weather.wind.speed;
        var currentWdir = weather.wind.deg;
        var sunRise = weather.sys.sunrise;
        var sunSet = weather.sys.sunset;
        var icon = weather.weather[0].icon;
        //set HTML elements for weather info
        $('#currentLocation').append(currentLocation);
        updateDisplay();
        $('#currentConditions').html(currentConditions);

        var iconSrc = "http://openweathermap.org./img/w/" + icon + ".png";
        $('#currentConditions').prepend('Outside the current conditions are <br><img id="weatherImg"src="' + iconSrc + '"><br>');
      });
  });
});

function changeUnits(Temp) {
  if ($('.btn').text() === 'Celsius')   
    return Math.round((Temp - 273.15)*10)/10 + " &degC";
  else
  return Math.round(((Temp* (9/5)) - 459.67)*10)/10 + " &degF";
}

$('.btn').on("click", function() {
  var text = $(this).text();
  $(this).text(text === 'Celsius' ? 'Fahrenheit' : 'Celsius');
  updateDisplay();
});


function updateDisplay(){
      $('#currentTemp').html(changeUnits(currentTemp));
      $('#high-low').html('<span id="high">High: ' + changeUnits(high) + '</span><br>' 
                                    + '<span id="low">Low: ' + changeUnits(low) + '</span>');
}

我已经引入了另一个函数updateDisplay（）来实际处理显示的temps的更改。正如我所说，我没有去测试它。但我很确定它会起作用。

Answer 4

JS：

var apiKey="get an openweathermap APIKey";    
var loc;
var lat;
var long;

var temp;
var high;
var low;
var icon;
//var wind;
//var windDir;
//var windSpd;

//api call to get lat and long
$.getJSON('http://ipinfo.io', function(data) {
  loc = data.loc.split(",");
  lat = parseFloat(loc[0]);
  long = parseFloat(loc[1]);
  getWeather(lat, long);
  initGmaps(lat, long);
});

//api call to use lat and long to generate a map
window.addEventListener('load', function() {

  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = '?key=AIzaSyDKgEmSnYmFmbhQVGY8K6NXxV5ym2yZXdc&callback=initMap';
  document.body.appendChild(script);
});

function initGmaps(lat, long) {
 var map = new GMaps({
    div: '#map',
    lat: lat,
    lng: long,
    zoom: 14,
    disableDefaultUI: true,
    mapTypeId: "satellite",
  });
map.addMarker({
  lat: lat,
  lng: long
});
}

//using weather to get data and plug it into our page
function getWeather(lat, long) {
  var api = 'http://api.openweathermap.org/data/2.5/weather?lat=' +
    lat + '&lon=' + long + '&appid=' + apiKey;

  $.ajax({
    url: api,
    dataType: 'json',
    success: function(data) {
      temp = {
        f: Math.round(((data.main.temp * 9 / 5) - 459.67) * 100) / 100 + " °F",
        c: Math.round(((data.main.temp - 273.15)) * 100) / 100 + " °C"
      };
      high = {
        f: Math.round(((data.main.temp_max * 9 / 5) - 459.67) * 100) / 100 + " °F",
        c: Math.round(((data.main.temp_max - 273.15)) * 100) / 100 + " °C"
      };
      low = {
        f: Math.round(((data.main.temp_min * 9 / 5) - 459.67) * 100) / 100 + " °F",
        c: Math.round(((data.main.temp_max - 273.15)) * 100) / 100 + " °C"
      };

      windSpd = {
        f: Math.round((data.wind.speed * 2.23694)*10)/10 + " MPH",
        c: Math.round((data.wind.speed)*10)/10 + " M/S"
      };

      var windArr = ["N","NNE","NE","ENE","E","ESE", "SE", "SSE","S","SSW","SW","WSW","W","WNW","NW","NNW"];

      var windDir = windArr[Math.floor(((data.wind.deg/22.5)+.5))]; 

      $('#currentLocation').append(data.name);
      $('#high').append(" " + high.f);
      $('#low').append(" " + low.f);
      $('#currentTemp').html(temp.f);
      $('#weatherDesc').html(data.weather[0].description);
      $('#windDir').html(windDir);
      $('#windDir').append('<span id="windSpd">' + windSpd.f + '</span>');            


      icon = data.weather[0].icon;
      var iconSrc = "http://openweathermap.org./img/w/" + icon + ".png";
      $('#currentConditions').html('<img id="weatherImg" src="' + iconSrc + '"><br>');
    }
  });
}

$('#currentTemp').on('click', function() {
  var current = $(this).data('nexttemp');
  $('#currentTemp').text(temp[current]);
  $('#high').html(high[current]);
  $('#low').html(low[current]);
  $('#windSpd').html(windSpd[current]);

  if (current == 'c') {
    $(this).data('nexttemp', 'f');
    return;
  }
  $(this).data('nexttemp', 'c');
});

HTML：

<html>
<head>
    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript,width=device-width,initial-scale=1">
    <title></title>
</head>
<body>
  <div id="header">
    <div class="left"></div>
    <div class="navbar"><h4>Free Code Camp Weather App</h4></div>
    <div class="right"><a href="https://github.com/Maverick494"><i class="fa fa-github bigger_icon"></i></a></div>
  </div>
    <div id="container">
      <div class="col-lg-4" id="map"></div>
      <div class="col-lg-4">
      <h1 id="currentLocation">Your Current Location is </h1>
      </div>
      <h2 class="center-text content-title" id="currentTemp"></h2>
      <h3 id="caption">Click temperature to change Units</h3>
      <div class="center-text">
      <p class="oneLine" id="labels">High: <span id="high"></span></p>
      <p class="oneLine" id="labels">Low:  <span id="low"></span></p>
      </div>
      <p class="center-text" id="currentConditions"></p>
      <p class="center-text" id="weatherDesc"></p>
      <div class="windCompass col-lg-4">
        <div class="compass">
          <div class="direction">
            <p id="windDir"></p>
          </div>
          <div class="arrow ne"></div>
        </div>
      </div>
    </div>
 </body>
</html>

CSS：

@import url(http://fonts.googleapis.com/css?family=Dosis:200,400,500,600);

body {
    background: url(http://eskipaper.com/images/pixel-backgrounds-1.jpg);
    background-size: auto;
  background-repeat: no-repeat;
    font-family: Ranga, cursive;
}

h4 {
  margin-top: 7px;
}

h1 {
    margin-left: -7px;
  font-size: 1.05em;
    color: white;
}

#header {
    background: #2980b9;
    color: white;
    padding: 0 5px;
    display: inline-block;
    width: 100%;
    margin: 0;
    box-shadow: 0 2px 5px #555555;
}

#header .left {
    display: inline-block;
    width: auto;
    float: left;
    margin-top: 7px;
    margin-left: 7px;
}

#header .navbar {
    display: inline-block;
    width: 60%;
}

#header .right {
    display: inline-block;
    width: auto;
    text-align: right;
    float: right;
    margin-top: 2px;
    margin-right: 7px;
    vertical-align: bottom;
}

.bigger_icon {
    margin-top: 10px;
  font-size: 2em;
    color: white;
}

#map {
    height: 200px;
    width: 200px;
    border-radius: 5%;
    margin-top: 20px;
}

#container {
    background: rgba(66, 66, 66, 0.6);
    display: block;
    position: relative;
    width: 40%;
    margin: 24px auto;
    min-height: 300px;
    padding: 16px;
    border-radius: 4px;
}

#container .center-text {
    text-align: center;
}

h2 {
    color: white;
    font-family: Ranga, cursive;
    font-size: 2.5em;
    font-weight: bold;
    margin-top: -230px;
}

#caption {
    font-size: 17px;
    text-align: center;
    color: pink;
}

#labels {
    color: darkGrey;
    font-size: 1.5em;
}

.oneLine {
    color: darkGrey;
    font-size: 1.5em;
    text-align: center;
    display: inline;
    padding: 5px;
}

#high {
    text-align: center;
    color: orange;
}

#low {
    text-align: center;
    color: blue;
}

#currentConditions {
    text-align: center;
    color: black;
}

#weatherDesc {
    margin-top: -25px;
    color: white;
}

.windCompass {
    margin-left: 75%;
    margin-top: -20%;
}

.compass {
    display: block;
    width: 120px;
    height: 120px;
    border-radius: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.85);
    position: relative;
    font-family: 'Dosis';
    color: #555;
    text-shadow: 1px 1px 1px white;
}

.compass:before {
    font-weight: bold;
    position: absolute;
    text-align: center;
    width: 100%;
    content: "N";
    font-size: 14px;
    top: -2px;
}

.compass .direction {
    height: 100%;
    width: 100%;
    display: block;
    background: #f2f6f5;
    background: -moz-linear-gradient(top, #f2f6f5 30%, #cbd5d6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f6f5), color-stop(100%, #cbd5d6));
    background: -webkit-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
    background: o-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
    border-radius: 100%;
}

.compass .direction p {
    text-align: center;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 80px;
    display: block;
    margin-top: -35%;
    font-size: 28px;
    font-weight: bold;
}

.compass .direction p span {
    display: block;
    line-height: normal;
    margin-top: -10%;
    font-size: 17px;
    text-transform: uppercase;
    font-weight: normal;
  font-family: Ranga, cursive; 
}

.compass .arrow {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
}

.compass .arrow:after {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid red;
    position: absolute;
    top: -6px;
    left: 50%;
    margin-left: -5px;
    z-index: 99;
}

.compass .arrow.nne {
    transform: rotate(22.5deg);
}

.compass .arrow.ne {
    transform: rotate(45deg);
}

.compass .arrow.ene {
    transform: rotate(67.5deg);
}

.compass .arrow.e {
    transform: rotate(90deg);
}

.compass .arrow.ese {
    transform: rotate(112.5deg);
}

.compass .arrow.se {
    transform: rotate(135deg);
}

.compass .arrow.sse {
    transform: rotate(157.5deg);
}

.compass .arrow.s {
    transform: rotate(180deg);
}

.compass .arrow.ssw {
    transform: rotate(202.5deg);
}

.compass .arrow.sw {
    transform: rotate(-135deg);
}

.compass .arrow.wsw {
    transform: rotate(-114.5deg);
}

.compass .arrow.w {
    transform: rotate(-90deg);
}

.compass .arrow.wnw {
    transform: rotate(-69.5deg);
}

.compass .arrow.nw {
    transform: rotate(-45deg);
}

.compass .arrow.nnw {
    transform: rotate(-24.5deg);
}

我最终找到了一些Ajax并使用它来做我所期望的按钮。虽然不是按钮，但它可以实现预期目标。我还努力改变高，低和风速，也随着单位变化而改变。

我感谢每个人提供的帮助。

随时提供有关代码的建议以及修复指南针渐变的css，并使愚蠢的事情更具响应性，如果你愿意的话。（地图没有做响应的事情。

Answer 5

您的脚本可能在DOM准备好之前加载。

您想要做的是以下几种选择之一： 1.在主体末尾加载JS脚本标记。 2.使用document.on（'ready'）事件包装$（'。btn'）。on（...）函数，因此只有在DOM准备就绪时才会触发此代码。

单击不更新功能的输出

5 个答案: