jQuery Переключение Фаренгейта/Цельсия

Я пытаюсь создать приложение погоды с API Open Weather Map. Я хочу создать кнопку, которая позволит вам переключаться между градусами Фаренгейта и Цельсия. Я пробовал буквально все, но вернулся к коду, который написал до того, как попытался вставить кнопку.

Как я могу реализовать это с моей текущей настройкой?

<div class="container">

    <div class="jumbotron text-center" 
style="background-color: #00F0F8FF; font-family: 'Oswald', sans-
serif; color: black;">
        <h1>Local Weather App</h1>
        <h2><span id="town"></span></h2>
        <h2>Temperture: <span id="temp"></span></h2>
        <div id="weatherIconBox"></div>
        <h2><span id="weatherType"></span></h2>
        <button type="submit" id="btn1">F&#176;</button>
        <button type="submit" id="btn2">C&#176;</button>

    </div>
</div>

var getIP = 'http://ip-api.com/json/';
var openWeatherMap = 'http://api.openweathermap.org/data/2.5/weather'
$.getJSON(getIP).done(function(location) {
$.getJSON(openWeatherMap, {
    lat: location.lat,
    lon: location.lon,
    units: "imperial",    
}).done(function(data) {
    $('#town').html(data.name);
    $('#temp').prepend(Math.floor(data.main.temp) + '&#176;');
$('#weatherType').html(data.weather[0].description).css('textTransform', 'capitalize');
$('#weatherIconBox').prepend('<img id="weatherIcon"     src="http://openweathermap.org/img/w/' + data.weather[0].icon +     '.png"/>');

    });
});

javascript openweathermap jquery
person WordPressFreddie    schedule 27.06.2017    source источник
comment
В примере у меня есть две кнопки, но я хочу сделать это только с одной кнопкой, я просто экспериментировал и забыл переключить ее обратно.   -  person WordPressFreddie    schedule 27.06.2017
comment
Пожалуйста, отредактируйте свое сообщение, чтобы включить любую дополнительную информацию, которая у вас есть по вашему вопросу. Не добавляйте это в комментарии, так как их труднее читать и их легче удалить. Кнопка редактирования вашего поста находится прямо под тегами поста.   -  person Heretic Monkey    schedule 27.06.2017
comment
Запросы на чистое написание кода не относятся к теме Stack Overflow — мы ожидаем, что вопросы здесь будут относиться к конкретным проблемам программирования — но мы с радостью поможем вам написать это самостоятельно! Расскажите нам что вы пробовали и где вы застряли. Это также поможет нам лучше ответить на ваш вопрос.   -  person Heretic Monkey    schedule 27.06.2017
comment
codepen.io/anon/pen/mwqzBj?editors=1011   -  person imjosh    schedule 27.06.2017

Ответы (3)


arrow_upward
1
arrow_downward

Я также использовал API для создания стороннего проекта.

Можете ли вы попробовать это. По умолчанию отображать данные в градусах Фаренгейта. И когда вы нажимаете кнопку переключения Цельсия. Сделайте простой математический расчет. Я думаю, что уравнение ((f + 40) ÷ 1,8) - 40 = c. Затем отобразите это значение.

person Yuhao    schedule 27.06.2017
comment
К вашему сведению, это еще один трюк. Есть 2 кнопки. Но когда один активен (например, Celcius), скройте другой. Поэтому, когда вы нажимаете кнопку Цельсия, покажите значение. Затем спрячьте Целиция. показать кнопку Фаренгейта. Активировать отображение значения по Фаренгейту - person Yuhao; 27.06.2017

arrow_upward
2
arrow_downward

Когда вы щелкаете элемент «#temp», этот код будет переключать текст между градусами Цельсия и Фаренгейта.

var cToF = function(c) {
  return (c * (9/5)) + 32;
};

var fToC = function(f) {
  return (f - 32) * (5/9);
};

$("#temp").on("click", function() {
  var isF = $(this).data("units") === "f";

  var oldTemp = $(this).text();
  var newTemp = isF ? fToC(oldTemp) : cToF(oldTemp);
  $(this).text(newTemp);

  var newUnits = isF ? "c" : "f";
  $(this).data("units", newUnits).attr("data-units", newUnits);
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Temperature: <span id="temp" data-units="f">100</span></h2>

<h2>Temperture: <span id="temp"></span></h2>
person sarink    schedule 27.06.2017

arrow_upward
1
arrow_downward

Будьте осторожны с математическими вычислениями...
Вы должны применить правильную формулу!

Вот простая кнопка-переключатель, выполняющая математические операции.

var temp = "c";
var tempEl = $('#temp');

$("#tempToggle").on("click",function(){
  
  // Get actual shown temperature
  var tempVal = parseFloat(tempEl.val());
  
  if(temp=="f"){
    temp="c";
    // Calculate
    var converted = (tempVal-32)/(9/5);
    // Set
    tempEl.val(converted.toFixed(1));
    $(this).html("C&#176;");
  }else{
    temp="f";
    // Calculate
    var converted = (tempVal*1.8)+32;
    // Set
    tempEl.val(converted.toFixed(1));
    $(this).html("F&#176;");
  }
});
#temp{
  width:3.2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="temp" value="20.5"> 
<button type="button" id="tempToggle">C&#176;</button>

person Louys Patrice Bessette    schedule 27.06.2017