トグル温度値Jquery

Question

温度のクリックで前後に切り替えたいので、いくつかの方法を試してみましたが、「再帰が多すぎます」というエラーが表示されます。私がケルビンに切り替えるときには動作しますが、摂氏に戻す方法を理解することはできません。どんな助けもありがたい。

これは私のhtmlです：

<p style="cursor: pointer">Temperature: <span id="temperature" class="toggle"></span></p> 

そして、ここではjavascriptのだ：

var tempKelvin = data.main.temp; 
var tempCelsius = Math.round(((data.main.temp) - 273.15)); 

$("#temperature").html(tempCelsius + 'C'); 

$("#temperature").click(function(){ 
    $(".toggle").html(Math.round(tempKelvin) + 'K'); 
}); 

Answer 1

は

var tempKelvin = data.main.temp; 
var tempCelsius = Math.round(((data.main.temp) - 273.15)); 

$("#temperature").html(tempCelsius + 'C'); 

$("#temperature").click(function(){ 
if ($(".toggle").html().indexOf('K')==-1) 
{ 
    $(".toggle").html(Math.round(tempKelvin) + 'K'); 
} 

else 
{ 
$("#temperature").html(tempCelsius + 'C'); 
} 
}); 

Answer 2

.....これを試してみてください、私はケルビンを表示するかどうかを保つだろうまたはCelciusを変数に入れたもの：

var temp = 290; 
 
var tempKelvin = temp; 
 
var tempCelsius = Math.round(((temp) - 273.15)); 
 

 
$("#temperature").html(tempCelsius + 'C'); 
 

 
var showKelvin = false; 
 

 
$("#temperature").click(function(){ 
 
    showKelvin = !showKelvin; 
 
    if (showKelvin) { 
 
    $("#temperature").html(Math.round(tempKelvin) + 'K'); 
 
    } else { 
 
    $("#temperature").html(tempCelsius + 'C'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p style="cursor: pointer">Temperature: <span id="temperature" ></span></p>

あなたはトグルクラスを必要としない - あなただけのすべてのケースでは温度のIDを使用することができます。

Answer 3

表示される温度をトラッキングするための別の変数を設定することもできます。

あなたはこのようにこれを行うことができますthis jsfiddle

var data = {main: {temp: 500}}; 
var tempKelvin = data.main.temp; 
var tempCelsius = Math.round(((data.main.temp) - 273.15)); 
var celcius = true; 

$("#temperature").html(tempCelsius + 'C'); 

$("#temperature").click(function(){ 
    if (celcius) { 
     $(".toggle").html(Math.round(tempKelvin) + 'K'); 
    } else { 
     $("#temperature").html(tempCelsius + 'C'); 
    } 
    celcius = !celcius; 
}); 

Answer 4

ごとに以下の例を参照してください：

<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script> 
 
<script> 
 
\t var tempKelvin = 10; 
 
\t var tempCelsius = Math.round(((tempKelvin) - 273.15)); 
 
\t 
 
\t function toggleTemp(){ 
 
\t \t var temp = $("#temperature").data("temp"); 
 
\t \t if(temp == "celsius") { 
 
\t \t \t $("#temperature").text(tempKelvin + "K"); 
 
\t \t \t $("#temperature").data("temp", "kelvin"); 
 
\t \t } else { 
 
\t \t \t $("#temperature").text(tempCelsius + "C"); 
 
\t \t \t $("#temperature").data("temp", "celsius"); 
 
\t \t } 
 
\t } 
 
\t 
 
\t $(document).ready(function(){ 
 
\t \t toggleTemp(); 
 
\t \t 
 
\t \t $("#temperature").click(function(){ 
 
\t \t \t toggleTemp(); 
 
\t \t }); 
 
\t }); 
 
</script> 
 

 
<p style="cursor: pointer">Temperature: <span id="temperature" class="toggle" data-temp="kelvin"></span></p>

Answer 5

使用して、このそれはあなたの問題を解決します。

HTML：

<p style="cursor: pointer"> 
    Temperature: 
    <span id="tempKelvin" class="toggle"></span> 
    <span id="tempCelsius" class="toggle" style="display:none"></span> 
</p> 

JS：

$(document).ready(function(){ 
    var tempKelvin = data.main.temp; 
    var tempCelsius = Math.round((tempKelvin - 273.15)); 

    $("#tempKelvin").text(tempKelvin + 'K'); 
    $("#tempCelsius").text(tempCelsius + 'C'); 

    $("p").click(function(){ 
     $("span").toggle(); 
    }); 
}); 

Answer 6

私は最近、FreeCodeCampのカリキュラムでは、同様の課題に取り組みました。これが私の解決策でした。

 var temp = 25; 
     var celsius = temp; 
     var fahr = (1.8 * temp + 32); 
     var switch_ = new Boolean(false); 

     $("#toggle").on("click", function() { 
      switch_ = !switch_; 
      var temp = switch_ == true ? celsius + " °C" : fahr + " °F"; 
      $(this).text(temp); 
     }); 

Answer 7

<a href="#" id="toggle">temp</a> 

このHTMLを試してみて、これは再帰エラーは、あなたが提供したコードの外で起こっている

 var temp = 25; 
     var celsius = temp; 
     var fahr = (1.8 * temp + 32); 
     var switch_ = new Boolean(false); 

     $("#toggle").on("click", function() { 
      switch_ = !switch_; 
      var temp = switch_ == true ? celsius + " °C" : fahr + " °F"; 
      $(this).text(temp); 
     });