改变（）jQuery不工作

Question

我在让我的 change() 事件在 jQuery 中工作时遇到了一些问题。我正在制作一个将温度转换为开尔文的小程序，并且我希望在转换后保持我的值的跨度更新 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>

Answer 2

您应该使用checked="checked" 将其中一个单选按钮设置为默认值。然后尝试以下操作：

   $(document).ready(function () {
        $('input.listener').change(function () {
          if ($(this).attr("type") == 'radio') {
            //radio button changed
            var u = $(this).val();
          } else {
            var u = $("input[type='radio']:checked").val();
          }
          var temperature = $('#temp').val();

          switch (u) {
            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;
          }
        });
      });

Answer 3

你没有break;之后

case 'unit':

当var name = "temp"

var val = $(this).val();

上面var val 的值将是一个字符串格式的数字，因此当您在case 'temp' 中执行val + something 时，该数字将被附加而不是被添加或减去。在'temp'的情况下，使用parseInt(val)将输入框的值转换为整数。