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>

当我选择输入收音机或其他时，如何更改范围滑块的范围？

1 个答案: