選擇輸入收音機或其他收音機時，如何更改范圍滑塊的范圍？

Question

我有一個問題，希望您可以幫助我：

  function GetGradeTemp () { var grades = $( "input[name='radios']:checked" ).val(); $( ".c_f" ).text(grades); var value1 = $("#tempMin").val(); var value2 = $("#tempMax").val(); $( "#minT" ).text(value1); $( "#maxT" ).text(value2); } $("input[name='radios']").change( GetGradeTemp ); $("#tempMin").change( GetGradeTemp ); $("#tempMax").change( GetGradeTemp ); GetGradeTemp(); $("#radio1").click( function() { // }); $("#radio2").click( function() { // }); 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> <span class="temp">Min</span><span id="minT" class="min"></span><span class="c_f"></span><span class="max">Max</span><span id="maxT" class="max"></span><span class="c_f"></span> <div class="row"> <div class="input-radio col s12 m12 offset-m5 offset-s5" style="margin-bottom: 0;"> <input type="radio" id="radio1" value="C" name="radios" checked> <label clase ="radioLabel" for="radio1">C</label> <br> <input type="radio" id="radio2" name="radios" value="F"> <label clase ="radioLabel" for="radio2">F</label> </div> </div> <div class="row" id="inline2"> <div class="col s12 m12 l12 offset-m3 offset-l4 temp_uv"> <div class="quantity"> <input type="number" id="tempMin" name="temp_min" step="1" min="-60" max="60" placeholder="-5 C" value="-5" /> </div> <div class="line"><strong>—</strong></div> <div class="quantity1"> <input type="number" id="tempMax" name="temp_max" step="1" min="-60" max="60" placeholder="40 C" value="40" /> </div> </div> </div> <br> <div class="row"> <div id="temp_Slider_C"></div> </div> 

在上面的代碼中，我有兩個輸入類型收音機和兩個輸入類型編號。 通過輸入類型收音機，我可以選擇溫度等級：°C或°F。 在輸入類型編號中，我可以輸入最小和最大溫度。 我想通過單擊輸入單選選項將值從°C轉換為°F或從°F轉換為°C。 示例：如果我的溫度以°C為單位，並且單擊數值= F的輸入單選按鈕，則溫度值必須在輸入類型編號中進行更改...您知道如何使用JS / jquery進行此操作？

注意：C =（F-32）* 5/9（攝氏）

F =（（C * 9）/ 5）+ 32（華氏度）

Answer 1

您只需要兩個收音機都需要一個change()可以了。

$('[name="radios"]').on('change',function() {
  // get this value for c or f
  var ThisVal = $(this).val().toLowerCase();
  // inputs val
  var value1 = $("#tempMin").val();
  var value2 = $("#tempMax").val();
  if(ThisVal == 'c'){
    $("#tempMin").val((value1 - 32) * 5 / 9);
    $("#tempMax").val((value2 - 32) * 5 / 9);
  }else{
    $("#tempMin").val(((value1 * 9) / 5 ) + 32);
    $("#tempMax").val(((value2 * 9) / 5 ) + 32);
  }
  GetGradeTemp ();
});

查看工作代碼

 function GetGradeTemp () { var grades = $( "input[name='radios']:checked" ).val(); $( ".c_f" ).text(grades); var value1 = $("#tempMin").val(); var value2 = $("#tempMax").val(); $( "#minT" ).text(value1); $( "#maxT" ).text(value2); } $("input[name='radios']").change( GetGradeTemp ); $("#tempMin").change( GetGradeTemp ); $("#tempMax").change( GetGradeTemp ); GetGradeTemp(); $('[name="radios"]').on('change',function() { // get this value for c or f var ThisVal = $(this).val().toLowerCase(); // inputs val var value1 = $("#tempMin").val(); var value2 = $("#tempMax").val(); if(ThisVal == 'c'){ $("#tempMin").val((value1 - 32) * 5 / 9); $("#tempMax").val((value2 - 32) * 5 / 9); }else{ $("#tempMin").val(((value1 * 9) / 5 ) + 32); $("#tempMax").val(((value2 * 9) / 5 ) + 32); } GetGradeTemp(); }); 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> <span class="temp">Min</span><span id="minT" class="min"></span><span class="c_f"></span><span class="max">Max</span><span id="maxT" class="max"></span><span class="c_f"></span> <div class="row"> <div class="input-radio col s12 m12 offset-m5 offset-s5" style="margin-bottom: 0;"> <input type="radio" id="radio1" value="C" name="radios" checked> <label clase ="radioLabel" for="radio1">C</label> <br> <input type="radio" id="radio2" name="radios" value="F"> <label clase ="radioLabel" for="radio2">F</label> </div> </div> <div class="row" id="inline2"> <div class="col s12 m12 l12 offset-m3 offset-l4 temp_uv"> <div class="quantity"> <input type="number" id="tempMin" name="temp_min" step="1" min="-60" max="60" placeholder="-5 C" value="-5" /> </div> <div class="line"><strong>—</strong></div> <div class="quantity1"> <input type="number" id="tempMax" name="temp_max" step="1" min="-60" max="60" placeholder="40 C" value="40" /> </div> </div> </div> <br> <div class="row"> <div id="temp_Slider_C"></div> </div>