jQuery格式化負數

我正在通過freecodecamp在當地的天氣網站上工作。我想知道是否有人可以幫我弄清楚如何分配jQuery來顯示負數的圓括號。即當它是-5度時，我試圖讓它說（-5）。jQuery格式化負數

這裏是jQuery的我目前的工作...

$(document).ready(function() { 
 
    if (navigator.geolocation) { 
 
     navigator.geolocation.getCurrentPosition(function(position) { 
 
      var long; 
 
      var lat; 
 
      lat = position.coords.latitude; 
 
      long = position.coords.longitude; 
 

 
      var api = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + long + "&appid=79b001616877b59c717616181ee219ec"; 
 

 
      $.getJSON(api, function(info) { 
 
       var farh; 
 
       var cels; 
 
       var kelvin; 
 
       var tempMin; 
 
       var minTemp; 
 
       var tempMax; 
 
       var maxTemp; 
 
       var tempMinC; 
 
       var minTempC; 
 
       var tempMaxC; 
 
       var maxTempC; 
 
       var strF = ("\u00B0'F'"); 
 
       var tempSwitch = false; 
 
       kelvin = info.main.temp; 
 
       farh = Math.round((kelvin) * (9/5) - 459.67); 
 
       cels = Math.round(kelvin - 273); 
 
       tempMinC = info.main.temp_min; 
 
       minTempC = Math.round(tempMinC - 273); 
 
       tempMaxC = info.main.temp_max; 
 
       maxTempC = Math.round(tempMaxC - 273); 
 
       tempMin = info.main.temp_min; 
 
       minTemp = Math.round((tempMin) * (9/5) - 459.67); 
 
       tempMax = info.main.temp_max; 
 
       maxTemp = Math.round((tempMax) * (9/5) - 459.67); 
 
       var city = info.name; 
 
       var weatherInfo = info.weather[0].description; 
 
       var forecastLow = minTemp; 
 
       var forecastHigh = maxTemp; 
 
       var forecastLowC = minTempC; 
 
       var forecastHighC = maxTempC; 
 
       var currCond = info.weather[0].icon; 
 
       $('#farh').html(farh); 
 
       $('#city').html(city); 
 
       $('#weatherInfo').html(weatherInfo); 
 
       $('#forecastLow').html(forecastLow); 
 
       $('#forecastHigh').html(forecastHigh); 
 
       $('#currCond').html(currCond); 
 
       $('#switch').click(function() { 
 
        if (tempSwitch === false) { 
 
         $('#farh').html(cels); 
 
         $('#forecastLow').html(forecastLowC) 
 
         $('#forecastHigh').html(forecastHighC) 
 
         tempSwitch = true; 
 
        } else { 
 
         $('#farh').html(farh); 
 
         $('#forecastLow').html(forecastLow); 
 
         $('#forecastHigh').html(forecastHigh); 
 
         tempSwitch = false; 
 
        } 
 
       }); 
 
      }); 
 
     }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<h2 class="weather-header" id="city"></h2> 
 
\t \t \t \t <h1><span class="curr-temp" id="farh"></span><span class="curr-temp">&deg</span></h1> 
 
\t \t \t \t <div class="col-md-5"></div> 
 
\t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t <label class="switched"> 
 
\t \t \t \t \t <input type="checkbox" id="switch"> 
 
\t \t \t \t \t <div class="slider"></div> 
 
\t \t \t \t </label> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-md-5"></div> 
 
\t \t \t \t <h3><span class="hi-lo" id="forecastLow"></span> Low - <span class="hi-lo" id="forecastHigh"></span> High</h3> 
 
\t \t \t \t <p class="forecast" id="weatherInfo"></p>

來源

2017-02-02 RhinoTekMN

你想它利用樣式完成？或者你可以在插入HTML之前操作該值嗎？ – talemyn

小知識：你可以通過檢查它是否爲<0來檢查負值;你可以通過使用'Math.abs（）'來獲得沒有負號的值。你在調用'html（）'中的值就是頁面上顯示的值。用這些知識點，試着找出你將如何解決問題。 –

請參閱[mcve]請 – j08691

您可以創建這樣的功能來格式化你的輸出：

function formatTemperature(value){ 
    if(value < 0) 
     return "(" + value + ")"; 
    else 
     return value; 
};

和包裝你的值調用這個函數，傳遞值。

我已更新您的代碼片段示例。

$(document).ready(function() { 
 
    if (navigator.geolocation) { 
 
     navigator.geolocation.getCurrentPosition(function(position) { 
 
      var long; 
 
      var lat; 
 
      lat = position.coords.latitude; 
 
      long = position.coords.longitude; 
 

 
      var api = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + long + "&appid=79b001616877b59c717616181ee219ec"; 
 

 
      $.getJSON(api, function(info) { 
 
       var farh; 
 
       var cels; 
 
       var kelvin; 
 
       var tempMin; 
 
       var minTemp; 
 
       var tempMax; 
 
       var maxTemp; 
 
       var tempMinC; 
 
       var minTempC; 
 
       var tempMaxC; 
 
       var maxTempC; 
 
       var strF = ("\u00B0'F'"); 
 
       var tempSwitch = false; 
 
       kelvin = info.main.temp; 
 
       farh = Math.round((kelvin) * (9/5) - 459.67); 
 
       cels = Math.round(kelvin - 273); 
 
       tempMinC = info.main.temp_min; 
 
       minTempC = Math.round(tempMinC - 273); 
 
       tempMaxC = info.main.temp_max; 
 
       maxTempC = Math.round(tempMaxC - 273); 
 
       tempMin = info.main.temp_min; 
 
       minTemp = Math.round((tempMin) * (9/5) - 459.67); 
 
       tempMax = info.main.temp_max; 
 
       maxTemp = Math.round((tempMax) * (9/5) - 459.67); 
 
       var city = info.name; 
 
       var weatherInfo = info.weather[0].description; 
 
       var forecastLow = minTemp; 
 
       var forecastHigh = maxTemp; 
 
       var forecastLowC = minTempC; 
 
       var forecastHighC = maxTempC; 
 
       var currCond = info.weather[0].icon; 
 
       
 
       function formatTemperature(value){ 
 
        if(value < 0) 
 
        return "(" + value + ")"; 
 
        else 
 
        return value; 
 
       } 
 
       
 
       $('#farh').html(farh); 
 
       $('#city').html(city); 
 
       $('#weatherInfo').html(weatherInfo); 
 
       $('#forecastLow').html(forecastLow); 
 
       $('#forecastHigh').html(forecastHigh); 
 
       $('#currCond').html(currCond); 
 
       $('#switch').click(function() { 
 
        if (tempSwitch === false) { 
 
         $('#farh').html(formatTemperature(cels)); 
 
         $('#forecastLow').html(formatTemperature(forecastLowC)); 
 
         $('#forecastHigh').html(formatTemperature(forecastHighC)); 
 
         tempSwitch = true; 
 
        } else { 
 
         $('#farh').html(formatTemperature(farh)); 
 
         $('#forecastLow').html(formatTemperature(forecastLow)); 
 
         $('#forecastHigh').html(formatTemperature(forecastHigh)); 
 
         tempSwitch = false; 
 
        } 
 
       }); 
 
      }); 
 
     }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<h2 class="weather-header" id="city"></h2> 
 
\t \t \t \t <h1><span class="curr-temp" id="farh"></span><span class="curr-temp">&deg</span></h1> 
 
\t \t \t \t <div class="col-md-5"></div> 
 
\t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t <label class="switched"> 
 
\t \t \t \t \t <input type="checkbox" id="switch"> 
 
\t \t \t \t \t <div class="slider"></div> 
 
\t \t \t \t </label> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-md-5"></div> 
 
\t \t \t \t <h3><span class="hi-lo" id="forecastLow"></span> Low - <span class="hi-lo" id="forecastHigh"></span> High</h3> 
 
\t \t \t \t <p class="forecast" id="weatherInfo"></p>

來源

2017-02-02 19:07:10 andrepaulo

jQuery格式化負數

回答

相關問題