Question

我只是在大声思考，我的编码解决方案是否有更优雅的方式。代码正在运行，但我已经使用Freecodecamp.com构建了一个天气应用程序，其任务是包含一个华氏度/摄氏度的开关。所以，有一个API，在我点击一个按钮后，它会给我温度，这会得到我的位置。这个温度是华氏温度。在html输出开始之前，应检查开关的状态，温度应以华氏度或摄氏度给出。再次点击按钮后，我可以在华氏温度和摄氏温度之间切换。

在我看来，这是合乎逻辑的。用IF（摄氏度）检查道具，否则（华氏度）。然后在选择器状态发生变化后，温度应相应改变。

我的问题是，这段代码可以优化，我刚开始使用Javascript并且代码质量感觉不是最理想的。提前致谢。

编辑：我不知道为什么我被投票，巨魔？

工作原型HERE

JS：

<script>
function a() {
  var apiKey = "40683c3325e6ebb13cbf4331b7cc1f44";
  var url = "https://api.darksky.net/forecast/";
  var lati;
  var longi;
  var icon;
  var data;
  var text;
  var tempFahrenheit;
  var tempCelsius;
  var textSummary;


  if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(showPosition);
      } else {
          $("#out").html("Geolocation is not supported by this browser.");
      }

  function showPosition(position) {
    var lati = position.coords.latitude;
    var longi = position.coords.longitude;
    $.getJSON(url + apiKey + "/" + lati + "," + longi + "?callback=?", function(data){
    //console.log(data);
      tempFahrenheit = data.currently.temperature;
      textSummary = data.currently.summary;

    // Different sayings based on icon API output
    var icon = data.currently.icon;
    switch(icon){
      case "clear-day":
        var text = "Cryyyssstaaal clear today. No clouds, not even the cloud service is working.";
        var icon = "img/SVG/Sun.svg";
        break;
      case "clear-night":
        var text = "Clear night.";
        var icon = "img/SVG/Moon.svg";
        break;
      case "rain":
        var text = "You need a shower? Now is your time. It's raining.";
        var icon = "img/SVG/Umbrella.svg";
        break;
      case "snow":
        var text = "It's so cold. I'm farting snowflakes.";
        var icon = "img/SVG/Snowflakes.svg";
        break;
      case "sleet":
        var text = "Falling ice cream or snow rain. Don't know";
        var icon = "img/SVG/Cloud-Snow-Sun-Alt.svg";
        break;
      case "wind":
        var text = "Flying umbrella ahead. WIND!?!?!?!";
        var icon = "img/SVG/Wind.svg";
        break;
      case "fog":
        var text = "Fucking Fog...";
        var icon = "img/SVG/Shades.svg";
        break;
      case "cloudy":
        var text = "Cloudy with a chance of ...";
        var icon ="img/SVG/Cloud.svg";
        break;
      case "partly-cloudy-day":
        var text = "Cloudy, but only above you. Sorry.";
        var icon ="img/SVG/Cloud-Sun.svg";
        break;
      case "partly-cloudy-night":
        var text = "Cloudy. Have you looked out the window today?";
        var icon ="img/SVG/Cloud-Moon.svg";
        break;
      case "hail":
        var text = "Be aware Golf balls made of ice are flying around.";
        var icon = "img/SVG/Cloud-Hail.svg";
        break;
      case "thunderstorm":
        var text = "Thor angry. Thor making noise.";
        var icon = "img/SVG/Cloud-Lightning.svg";
        break;
      case "tornado":
        var text = "That's .... have you seen it? That was your neighbours car. A tornado is close.";
        var icon = "img/SVG/Tornado.svg";
        break;
      default:
        var text = "no weather found. pls restart...";
        var icon = "img/SVG/Compass.svg";
        break;
    }


    $("#text").html(text);
    $("#icon").attr("src",icon);
    $("#summary").html(textSummary);



    if($("#tempSwitch").prop("checked") == true) {
        var tempCelsius = ((tempFahrenheit-32)/1.8).toFixed(2);
        $("#temperature").html(tempCelsius);
    } else {
        $("#temperature").html(tempFahrenheit);
    }
    $("#tempSwitch").change(function() {
      if($("#tempSwitch").prop("checked") == true) {
          var tempCelsius = ((tempFahrenheit-32)/1.8).toFixed(2);
          $("#temperature").html(tempCelsius);
      } else {
          $("#temperature").html(tempFahrenheit);
      }
    });
  })
};

};

编辑：HTML代码

<h1>No Bullshit Weather App</h1>
<p>Click the button to check the weather</p>
<p>Alternative: If you have a window and can move your head, look outside to check the weather</p>

<p><button onclick="a()">Show my location</button></p>
<div id="out"></div>
<div id="temperature"></div>
  <input id="tempSwitch" type="checkbox" unchecked data-toggle="toggle" data-on="Celsius" data-off="Fahrenheit">
<div id="text"></div>
<div id="summary"></div>
<img id="icon" src="">

Answer 1

我认为这不是一种更优雅的方式，但您可以尝试使用三元运算符：

＆＃13;

  tempFahrenheit = 0;
  
  $("#tempSwitch").change(function() {
      var checked = $(this).is(":checked")
          var tempCelsius = ((tempFahrenheit-32)/1.8).toFixed(2);
          $("#temperature").html(checked?tempCelsius:tempFahrenheit);
 
    }).trigger('change');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="tempSwitch" type="checkbox" unchecked data-toggle="toggle" data-on="Celsius" data-off="Fahrenheit">
<div id="temperature"></div>

＆＃13;

Answer 2

你可以做这样的事吗？我无法测试它，因为api似乎没有在你的github页面上工作。

var temp;

function checkTemp()
{
    //CELCIUS
    if($("#tempSwitch").checked)
    {
        temp = ((tempFahrenheit-32)/1.8).toFixed(2);
    } 
    //FAHRENHEIT
    else 
    {
        temp = tempFahrenheit;
    }
    //SET HTML
    $("#temperature").html(temp);

}
//ONCHANGE RUN FUNCTION CHECKTEMP
$("#tempSwitch").change(checkTemp);
//FIRST TIME RUN FUNCTION
checkTemp();

JQuery - 用于检查按钮状态的更优雅的编码解决方案

2 个答案: