Question

我使用的是一个提供摄氏温度和华氏温度的API，并试图使用这样的切换在两者之间切换：

＆＃13;

//toggle temperature
var celc = $("#convert-temp").prop('checked');
var temp_c = 20; // dummy data
var temp_f = 60; // dummy data
if (celc == false) {
  $("#temp_c").html(temp_c + "<span>&#8451;</span>");
} else if (celc == true) {
  $("#temp_c").html(temp_f + "<span>&#8457;</span>");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
  <label><input type="checkbox" id="convert-temp" data-toggle="toggle" data-on="&#8451;" data-off="&#8457;">Toggle Temperature</label>
</div>

<div id="temp_c"></div>

＆＃13;

此切换根本不会在两个温度之间切换。变量temp_c和temp_f是从API中获取的。

Answer 1

我刚刚为您的代码添加了一些更改

<div class="checkbox">
    <label><input type="checkbox" id="convert-temp" data-toggle="toggle" data-on="&#8451;" data-off="&#8457;">Toggle Temperature</label>
</div>
<h1 id='temp_c'></h1>    

$(document).ready(function(){
      $('#convert-temp').click(function(){
        var temp_c = 51; will loaded from api
        var temp_f = 125
        var celc = $("#convert-temp").prop('checked');
                    if(celc === false){
                        $("#temp_c").html(temp_c+"<span>&#8451;</span>");
                    }else if(celc == true) {
                        $("#temp_c").html(temp_f+"<span>&#8457;</span>");
                    }
      })
    })

Answer 2

您可以尝试使用此代码

$(document).ready(function(){
  $('#convert-temp').on('click' , function(){
    var temp_c = 51; 
    var temp_f = 125
    if($(this).is(':checked')){
        $("#temp_c").html(temp_f+"<span>&#8457;</span>");
    }else{
        $("#temp_c").html(temp_c+"<span>&#8451;</span>");

    }

  })
})

AppCompat

Answer 3

您需要将一个处理程序附加到切换复选框，并在值更改时运行代码

 var temp_c = 20; // dummy data
  var temp_f = 60; // dummy data

$('.checkbox').on('change','#convert-temp',function(){
  //toggle temperature
  var celc = $(this).prop('checked');
 
  if (celc == false) {
    $("#temp_c").html(temp_c + "<span>&#8451;</span>");
  } else if (celc == true) {
    $("#temp_c").html(temp_f + "<span>&#8457;</span>");
  }
});

// set the default:
$("#temp_c").html(temp_c + "<span>&#8451;</span>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
  <label><input type="checkbox" id="convert-temp" data-toggle="toggle" data-on="&#8451;" data-off="&#8457;">Toggle Temperature</label>
</div>

<div id="temp_c"></div>

Answer 4

可以按类而不是ID切换，并使用纯引导程序如果页面中有引导程序css和js文件。这是一个例子......

<div class="checkbox">
  <label data-toggle="collapse"  data-parent="#temp" data-target=".temp_t"><input type="checkbox" id="convert-temp" >Toggle Temperature</label>
</div>

<div id="temp">
    <span id="temp_c" class="temp_t collapse in">&#8451;</span>
    <span id="temp_f" class="temp_t collapse">&#8457;</span>
</div>

我在这里创造了一个小提琴...... https://jsfiddle.net/oh07zekp/

使用Bootstrap切换来切换温度

4 个答案: