0

メトリック変換を処理する関数をセットアップしましたが、それほどシームレスではありません。lbs を kg に、kg を lbs に変換したいと思います。私が抱えている問題は、jquery 変更機能の使用です。これにより、変換が変更時にのみ発生しますが、ポンドからkgへの連続した変換が必要な場合があり、スタックしてポンドをより多くのポンドに、または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

EDIT 、 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 に答える