クリックすると異なる都市の摂氏と華氏を切り替えようとしています

Question

問題は、温度ボタンが地元の天気の摂氏と華氏を切り替えるように見えるという問題です。私はコンテナの上と下でクリックできる他の都市でこれを行うことができるようにしたいと思います。私はこれをドバイ天気で実装しようとしましたが、これを試してみましたが、温度値やテキストに変化がなく、Cが大文字になるという奇妙な結果が得られます。誰でもこの作業を手助けできますか？これがソートされているので、私は他の都市にも適用します。私は下にCodepenを提供しているだけでなく、私のコードのいくつかは、この作業を試みるために使用されています。

function toggleTemp(lat, lon) { 
    var weatherAPI = 
    "https://fcc-weather-api.glitch.me/api/current?lat=" + lat + "&lon=" + lon; 

$.getJSON(weatherAPI, function(data) { 
    $(".temp-slider").on("click", function() { 
    var tempC = data.main.temp; 
    var tempF = tempC * 9/5 + 32; 

    if (toggleF) { 
     $("#weather-degrees").html(Math.round(tempF) + "°F"); 
     $("#temp-slider-text").html("Fahrenheit"); 
     toggleF = false; 
    } else if (toggleF == false) { 
     $("#weather-degrees").html(Math.round(tempC) + "°C"); 
     $("#temp-slider-text").html("Celsius"); 
     toggleF = true; 
    } 
    }); 
}); 

}

https://codepen.io/KUBIX90/pen/NwWvNb

Answer 1

最初のドバイをクリックした後、あなたのcodepen作品（主に）ですべて。

この機能ではvar toggleF = true;とtoggleTemp(25.2, 55.27);ですが、それ以外の点では違いがありますので、その点が異なります。

しかし、var toggleF = trueを実行すると、グローバル変数とローカル変数が衝突します。代わりにtoggleF = !toggleFのようなものが必要ですが、toggleFがまたtoggleTemp（）で変更されているので、それを削除するだけです。

また、toggleTemp関数では、度数タイプを切り替えるたびにfcc-weather-api.glitch.me/api/currentが新たに呼び出されます。ユーザーがhttp要求よりも速くこのボタンをクリックすると、エラーが発生する可能性があります。変数に温度を保持し、ユーザーが別の場所を選択した場合にのみ、APIに新しい要求を行うことをお勧めします。それはあなたの学位タイプの表示の変更を完全にクライアント側にすることができます。

$.getJSON(weatherAPI, function(data) { 
    $(".slider").on("click", function() { 

のみドバイで呼び出されtoggleTemp()関数内（です：

私はスライダーはあなたがドバイをクリックした後まで動作しない理由は、あなたが開始するブロックを持っているということだと思いますボタンのクリックイベント）。したがって、少なくとも1回はトグル機能が実行されるまで、.sliderクラスオブジェクトのクリックには関連付けられません。悪いことに、ドバイをクリックするたびに、再度呼び出すと、ワンクリックでその中のコードを二重に実行するという奇妙な動作が発生します。

TL; DRは、次のようにします。

• すぐにページが用意されると、自身の上ご.slider").on("click"関数を定義します。
• 唯一のことは、反転toggleFとGUIを更新することです。
• ユーザーが場所を切り替えたときにのみ、apiから温度を取得して保存します。