jQuery切換華氏度/攝氏度

我正在嘗試使用打開天氣地圖API創建天氣應用程序。我想創建一個按鈕，讓您在華氏和攝氏之間切換。我已經嘗試了一切，但我已經回到我嘗試將按鈕放入之前寫入的代碼。jQuery切換華氏度/攝氏度

我該如何使用當前的設置來實現？

<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"/>'); 

    }); 
});

來源

2017-06-27 WordPressFreddie

在這個例子中，我有兩個按鈕，但我想只用一個按鈕，我只是嘗試這樣做，忘了切換回來。 – WordPressFreddie

請[編輯]您的文章，以包括您對您的問題的任何其他信息。避免在評論中添加這些內容，因爲它們難以閱讀並且可以更容易地刪除。您帖子的修改按鈕位於帖子標籤下方。 –

純粹的代碼寫入請求在堆棧溢出上偏離主題 - 我們希望這裏的問題與*特定的*編程問題有關 - 但我們會很樂意幫助您自己編寫它！告訴我們[您嘗試過的]（https://stackoverflow.com/help/how-to-ask），以及您卡在哪裏。這也將幫助我們更好地回答你的問題。 –

我也在使用API創建一個側面項目。

你可以試試這個。默認情況下以華氏溫度顯示數據。當你點擊Celcius切換按鈕時。做一個簡單的數學計算。我認爲方程是（（f + 40）÷1.8） - 40 = c。然後顯示這個值。

來源

2017-06-27 17:49:30 Yuhao

F.Y.I另一個訣竅是做到這一點。有2個按鈕。但是當一個人活躍時（例如Celcius）隱藏另一個人。所以當你點擊Celcius按鈕時，顯示值。然後隱藏Celicius。顯示華氏按鈕。觸發華氏溫度值的顯示 – Yuhao

當你點擊「#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>

來源

2017-06-27 18:04:54 sarink

謹慎看待數學運算...
你必須應用正確的公式！

這是一個簡單的切換按鈕來做數學運算。

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>

來源

2017-06-27 18:25:56

jQuery切換華氏度/攝氏度

回答

相關問題