Question

我已经设置了一个功能来处理我的指标转换，但它不是那么无缝。我想将lbs转换为kg和kg转换为lbs。我遇到的问题是使用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>

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

Answer 1

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

的值时发生

我稍微更改了你的代码，在这种情况下缓存变量是好的，同样，我将函数代码分离到一个名为conversion的函数，该函数在<select>更改时触发keyup输入上的change或#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

无缝转换从kg到lb和lb到kg客户端

1 个答案: