divに含まれているhtmlの切り替え

Question

divを切り替えると、クリックすると華氏に変換され、再びクリックすると元々はapiによって取り込まれた摂氏に戻ります。

コードは、私は数字のみを取り扱っておりますときに動作します：私はHTMLにテキストを追加しようとすると、それは華氏変換に一度トグルするのではなく、

var fahrenheit = (data.main.temp * 1.8 + 32).toFixed(2); 
var celsius = data.main.temp; 

$("#temp").on("click", function() { 
$("#temp").html($("#temp").html() == fahrenheit ? celsius : fahrenheit) 

}); 

しかし、それは動作しません。もう一度クリックすると元に戻すことができます。

var fahrenheit = (data.main.temp * 1.8 + 32).toFixed(2); 
var celsius = data.main.temp; 

$("#temp").on("click", function() { 
$("#temp").html($("#temp").html() == fahrenheit + "&deg F" ? celsius + "&deg C" : fahrenheit + "&deg F") 

}); 

私はこれに少し困惑しています。私は周りに検索したが、私は何をしたいかに合った解決策を見つけることができないようだ。

ありがとうございました。ここで

はあなたの問題は、JavaScriptのonclickを通じチェックしている私のcodepen

Answer 1

へのリンクです。

変更この：これに

$("#temp").html($("#temp").html() == fahrenheit + "&deg F" ? celsius + "&deg C" : fahrenheit + "&deg F") 

：

あなたがそれをチェックすると、あなたはJavaScriptを使用してその代わり度のHTMLエンティティを使用している、あなたは、単に度の文字を使用する必要があります

$("#temp").html($("#temp").html() == fahrenheit + "° F" ? celsius + "° C" : fahrenheit + "° F") 

Answer 2

現在摂氏で表示されているかどうかを確認し、それに基づいて決定する必要があります。

$("#temp").on("click", function() { 
    var isCelsius = $(this).html().indexOf('C') > -1; 
    $('#temp').html(isCelsius ? celsius + '&deg C' : fahrenheit + '&deg F'); 
}); 

Answer 3

html（）を使用して値を取得すると、解析されたHTMLが得られるので、&degのHTMLエンティティがありますが、解析された値はありません。

コードを修正するには、度エンティティの16進値を比較できます。

$("#temp").on("click", function() { 
    $("#temp").html($("#temp").text() == fahrenheit + "\xB0 F" ? celsius + "\xB0 C" : fahrenheit + "\xB0 F") 
}); 

Answer 4

数字だけを比較することができます（最後の3°Fまたは°C '文字なし）。

var fahrenheit = (data.main.temp * 1.8 + 32).toFixed(2); 
 
var celsius = data.main.temp; 
 

 
$("#temp").on("click", function() { 
 
    var numberOnly = $("#temp").html().length - 3; 
 
    $("#temp").html($("#temp").html().substring(0, numberOnly) == fahrenheit ? celsius + "&deg C" : fahrenheit + "&deg F"); 
 
});