javascript - jQuery 不工作

Question

我在 jQuery 中使用 Change() 事件时遇到一些问题。我正在制作一个将温度转换为开尔文的小程序，我希望转换后保持我的值的跨度能够更新:1)每次要转换的温度发生变化时以及2)每次从单选按钮中选择不同的温度标度时。

相关代码:

$(document).ready(function() {
  $('input[type=radio]').checkboxradio();
  var temp = parseFloat()
  $('input.listener').change(function() {
    var name = $(this).attr("name");
    var val = $(this).val();

    switch (name) {
      case 'unit':
        var temperature = $('input#temp').val();
        switch (val) {
          case 'f':
            $('span#output').html(((temperature - 32) / 1.8) + 273.15);
            break;
          case 'c':
            $('span#output').html(temperature + 273.15);
            break;
          case 'r':
            $('span#output').html(temperature / 1.8);
            break;
        }
      case 'temp':
        var u = $('input[name=unit]:checked').val();
        switch (u) {
          case 'f':
            $('span#output').html(((val - 32) / 1.8) + 273.15);
            break;
          case 'c':
            $('span#output').html(val + 273.15);
            break;
          case 'r':
            $('span#output').html(val / 1.8);
            break;
        }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widget">
  <fieldset>
    <legend>Select a Unit to Convert to Kelvin: </legend>
    <label for="fRadio">Fahrenheit</label>
    <input id="fRadio" class="listener" type="radio" name="unit" value="f">
    <label for="cRadio">Celsius</label>
    <input id="cRadio" class="listener" type="radio" name="unit" value="c">
    <label for="rRadio">Rankine</label>
    <input id="rRadio" class="listener" type="radio" name="unit" value="r">
  </fieldset>
</div>
<h2>Temperature Converter</h2>
<p>Type a value in the Fahrenheit field to convert the value to Kelvin:</p>

<p>
  <label>Temperature</label>
  <input id="temp" class="listener" type="number" value="32">
</p>
<p>Kelvin: <span id="output"></span></p>

我的猜测是我犯了一个非常愚蠢的小错误，但我似乎无法弄清楚。感谢您提供的所有帮助、建议和解决方案。

Answer 1

您的代码有两个错误:

• 忘记父 switch 语句的 breaks;。
• 忘记温度字段上的name="temp"。

我将最终温度更改为变量，并制作了输出文本，以便有这么多 $('span#output').html(Temperature);

此外，您应该使用 oninput 事件来检测数字字段的更改。

$(document).ready(function() {
  //$('input[type=radio]').checkboxradio();
  var temp = parseFloat();
  $('input.listener').on('change', updateTemp);
  $('input.listener').on('input', updateTemp);
  
  function updateTemp() {
    var name = $(this).attr("name");
    var val = $(this).val();
    var final;
    
    switch (name) {
      case 'unit':
        var temperature = $('input#temp').val();
        switch (val) {
          case 'f':
            final = ((temperature - 32) / 1.8) + 273.15;
            break;
          case 'c':
            final = temperature + 273.15;
            break;
          case 'r':
            final = temperature / 1.8;
            break;
        }
      break;
      case 'temp':
        var u = $('input[name=unit]:checked').val();
        switch (u) {
          case 'f':
            final = ((val - 32) / 1.8) + 273.15;
            break;
          case 'c':
            final = val + 273.15;
            break;
          case 'r':
            final = val / 1.8;
            break;
        }
      break;
    }
    $("#output").text(final);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widget">
  <fieldset>
    <legend>Select a Unit to Convert to Kelvin: </legend>
    <label for="fRadio">Fahrenheit</label>
    <input id="fRadio" class="listener" type="radio" name="unit" value="f">
    <label for="cRadio">Celsius</label>
    <input id="cRadio" class="listener" type="radio" name="unit" value="c">
    <label for="rRadio">Rankine</label>
    <input id="rRadio" class="listener" type="radio" name="unit" value="r">
  </fieldset>
</div>
<h2>Temperature Converter</h2>
<p>Type a value in the Fahrenheit field to convert the value to Kelvin:</p>

<p>
  <label>Temperature</label>
  <input id="temp" class="listener" type="number" name="temp" value="32">
</p>
<p>Kelvin: <span id="output"></span></p>