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

您可以使用另一个变量来跟踪显示的温度。

根据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 2

试试这个......

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 3

我要保留是否在变量中显示Kelvin或Celcius，如：

＆＃13;

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');
  }
});

＆＃13;

<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>

＆＃13;

您不需要切换类 - 您可以在所有情况下使用温度ID。

Answer 4

我最近在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 5

你可以这样做：

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

Answer 6

试试这个HTML

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

这个JS

        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

使用它可以解决您的问题。

HTML：

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

JS：

{{1}}

切换温度值Jquery

7 个答案: