0

我已经设置了一个函数来处理我的度量转换，它并不是那么无缝。我想将磅转换为公斤，将公斤转换为磅。我遇到的问题是使用 jquery 更改功能。它导致转换仅在更改时发生，但有时我只是想从 lbs 到 kg 进行背靠背转换，它会卡住并将 lbs 转换为更多 lbs 或将 kg 转换为更多 kg。任何帮助表示赞赏。这是我下面的代码

$("#wUnits").change(function () {
        var approx = 2.2;
        if ($(this).val() == "lbs") {
            value = $("#txtWeight").val() / approx;
            $('#wValue').val(value.toFixed(2));
        } else if ($(this).val() == "kg") {
            value = $("#txtWeight").val() * approx;
            $('#wValue').val(value.toFixed(2));
        } else {
            var value = "";
            $('#wValue').val(value);
        }
    });

下面是我的标记

<select id="wUnits">
<option value="">--</option>
<option value="lbs">lbs</option>
<option value="kg">kg</option>
    </select>

理想情况下，我想要实现的是使用下拉菜单在转换之间进行无缝转换。

4

1 回答 1

1

我的理解是，您希望转换发生的不仅仅是当您更改<select>

我稍微更改了您的代码，在这种情况下缓存变量很好，此外，我将函数代码分离为一个名为的函数，该函数在更改和输入时conversion触发。<select>keyupchange#txtWeight

编辑，实现Jason Sperske的想法，并在结果单元中添加了一个额外的内容<span>，以避免混淆。它应该是：

HTML：

  Convert <input type="text" id="txtWeight" />
  <select id="wUnits"><br>
    <option value="0">--</option>
    <option value="0.45359237">lbs</option>
    <option value="2.2">kg</option>
  </select><br>
  Result: <input type="text" id="wValue" /><span id='rUnits'

JS：

var $units = $("#wUnits");
var $wvalue = $('#wValue');
var $txtweight = $("#txtWeight");
var $runits = $('#rUnits');

$units.change(conversion);
$txtweight.on('keyup change',conversion);

function conversion () {
  var value = $txtweight.val() * $units.val();
  if(value !== 0) {
    $wvalue.val(value.toFixed(2));
    $runits.text($units.children(':gt(0):not(:selected)').text());
  } else {
    $wvalue.val("");
    $runits.text('');
  }
}

JSBin Demo

于 2013-08-20T21:59:00.393 回答