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

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

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

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

编辑：我不知道为什么我会被否决，巨魔

工作原型

JS:

函数a（）{
var apiKey=“40683c3325e6ebb13cbf4331b7cc1f44”；
变量url=”https://api.darksky.net/forecast/";
var lati；
长变种；
var图标；
var数据；
var文本；
温度华氏度；
摄氏温度；
var文本摘要；
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（showPosition）；
}否则{
$（“#out”）.html（“此浏览器不支持地理位置。”）；
}
功能显示位置（位置）{
var lati=位置坐标纬度；
var longi=位置坐标经度；
$.getJSON（url+apiKey+“/”+lati+“，+longi+”？回调=？”，函数（数据）{
//控制台日志（数据）；
温度=data.current.temperature；
textSummary=data.current.summary；
//基于图标API输出的不同说法
var icon=data.current.icon；
开关（图标）{
案例“晴天”：
var text=“Cryyysstaaal今天天气晴朗。没有云，甚至云服务也无法工作。”；
var icon=“img/SVG/Sun.SVG”；
打破
案例“晴朗之夜”：
var text=“晴朗的夜晚。”；
var icon=“img/SVG/Moon.SVG”；
打破
“雨”一案：
var text=“您需要淋浴吗？现在是您的时间了。下雨了。”；
var icon=“img/SVG/umbrane.SVG”；
打破
案例“雪”：
var text=“天气太冷了，我在放屁。”；
var icon=“img/SVG/Snowflakes.SVG”；
打破
“雨夹雪”案例：
var text=“掉落的冰激凌或雪雨。不知道”；
var icon=“img/SVG/Cloud-Snow-Sun-Alt.SVG”；
打破
案例“风”：
var text=“前方飞伞。风！？！”；
var icon=“img/SVG/Wind.SVG”；
打破
案例“雾”：
var text=“该死的雾…”；
var icon=“img/SVG/Shades.SVG”；
打破
“多云”情况：
var text=“多云，有可能……”；
var icon=“img/SVG/Cloud.SVG”；
打破
“部分阴天”一案：
var text=“多云，但仅在您上方。抱歉。”；
var icon=“img/SVG/Cloud-Sun.SVG”；
打破
“部分多云的夜晚”案例：
var text=“多云。你今天有没有看窗外？”；
var icon=“img/SVG/Cloud Moon.SVG”；
打破
“冰雹”案：
var text=“请注意，冰球正在四处飞行。”；
var icon=“img/SVG/Cloud Hail.SVG”；
打破
“雷暴”一案：
var text=“雷神发怒，雷神发出噪音。”；
var icon=“img/SVG/Cloud Lightning.SVG”；
打破
“龙卷风”一案：
var text=“那个……你们看到了吗？那个是你们邻居的车。龙卷风就要来了。”；
var icon=“img/SVG/Tornado.SVG”；
打破
违约：
var text=“没有发现天气。请重新启动…”；
var icon=“img/SVG/Compass.SVG”；
打破
}
$（“#text”）.html（text）；
$（“图标”）.attr（“src”，图标）；
$（“#摘要”）.html（文本摘要）；
if（$（“#tempSwitch”）.prop（“选中”）==true）{
var温度摄氏=（（温度华氏-32）/1.8）.toFixed（2）；
$（“#温度”）.html（摄氏温度）；
}否则{
$（“#温度”）.html（华氏温度）；
}
$（“#临时开关”）.change（函数（）{
if（$（“#tempSwitch”）.prop（“选中”）==true）{
var温度摄氏=（（温度华氏-32）/1.8）.toFixed（2）；
$（“#温度”）.html（摄氏温度）；
}否则{
$（“#温度”）.html（华氏温度）；
}
});
})
};

})；

编辑：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="">

无狗屁天气应用程序
点击按钮查看天气

备选方案：如果你有一扇窗户，可以移动你的头，看看外面的天气

显示我的位置

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

tempfhrenheit=0；
$（“#临时开关”）.change（函数（）{
var checked=$（this）.is（“：checked”）
var温度摄氏=（（温度华氏-32）/1.8）.toFixed（2）；
$（“#温度”）.html（选中？摄氏温度：华氏温度）；
}).触发（“变更”）；

---

你能做这样的事吗？我无法测试它，因为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();

---

还需要共享html代码，看起来您正在使用更改按钮。添加了相关html代码。是的，我正在复选框按钮上使用.change（）。按钮是一个通过@MarioK切换的按钮。你应该可以做类似的事情。谢谢@CarstenLøvboAndersen。这是我第一次使用函数，但该函数将在另一个函数中，这意味着只有在调用函数/有人更改按钮状态时，才会检查按钮的初始状态。我将把应用程序的全部代码放在这里，以便在上下文中更容易理解。multumesc，madalin。问题是按钮的初始状态不会给出

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();