Question

我是初学者，我的主体有以下问题/代码：

<body>
  <form action="#">
    <input type="text" id="start" /> 
    =
    <input type="text" id="finish" /> 
  </form>
  <script>
  $(function() {
    var cVal = $("#start").val();
    var fVal = $("#finish").val();
  });
  </script>
</body>

有两个文本框，我希望在摄氏文本框中输入的值在另一个文本框中转换为华氏度。我试过用

keyup()

功能但未能产生我想要的结果。在摄氏度盒子中键入15应该会产生59华氏度。我理解.val（）不接受任何参数，那么我将在哪里进行转换数字的计算？我怎样才能加入keyup？

感谢任何帮助！

Answer 1

val函数执行获取参数，您可以将新值传递给它，它将更新文本框内容。单击val上的链接，它将转到jQuery文档，其中解释了所有可能的调用。或者参见下面的示例。

function fahrenheitToCelsius(fahrenheit) {
  var val = 0;
  // perform calculation
  return val;
}

function celsiusToFarenheit(celsius) {
  var val = 0;
  // perform calculation
  return val;
}

$(function() {
    $("#start").on('keyup', function() {
      $("#finish").val(celsiusToFarenheit($(this).val()));
    });
    $("#finish").on('keyup', function() {
      $("#start").val(fahrenheitToCelsius($(this).val()));
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
    <input type="text" id="start" /> Celsius
    =
    <input type="text" id="finish" /> Fahrenheit
  </form>

Answer 2

jQuery .val() 函数是一个重载函数，这意味着它需要 0 到 1 个参数，并且其效果因传递的参数数量而异。

正如您在我的示例中看到的，调用 celsiusInput.val() 只会返回字段的当前值。但是，如果您像这样使用它 farenheitOutput.val(farenheit)，输入的当前值将被传递的变量覆盖。

const updateFarenheit = () => {

  // find the input and output in the dom by their id
  const celsiusInput = $("#start");
  const farenheitOutput = $("#finish");

  // get the input value
  const celsius = celsiusInput.val();

  const farenheit = celsius * 9 / 5 + 32;

  // update the farenheit output
  farenheitOutput.val(farenheit);

}

// this function runs when all js is loaded aka. "document ready"
$(document).ready(function() {

  // get input field by id
  const celsiusInput = $("#start");

  // we pass the updateFarenheit function we defined before as the function which should run
  // as soon as the keyup event occures on our celsiusInput field
  celsiusInput.keyup(updateFarenheit);
});

<html lang="">

<head>
  <meta charset="utf-8">
  <title>Celsius to Farenheit</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <form action="#">
    <input type="text" id="start" /> =
    <input type="text" id="finish" />
  </form>
</body>

</html>

Answer 3

这是一件很简单的事情，根本不需要jQuery，而且因为你没有标记jQuery，所以这里提供了一个简单的javascript解决方案。

您需要做的是在每个输入元素上添加一个keyup触发器。

要抓取我们使用document.getElementById(id)的输入字段，我们使用此字段是因为您已将id属性添加到字段中（它比我提到的后一种方法更快）。我们可以使用document.querySelector(selector)来获取输入字段。如果您在摄氏度字段中使用了name="celsius"，我们可以使用document.querySelector('input[name="celsius"]')来抓取该元素。

接下来我们需要做的是对我们的输入字段进行keyup触发。这是通过element.onkeyup = function() {}完成的，在每个函数中我们计算另一个字段的值。

var celsius = document.getElementById('start'),
    fahrenheit = document.getElementById('finish');
    
celsius.onkeyup = function() {
    fahrenheit.value = this.value * 9/5 + 32; 
}
    
fahrenheit.onkeyup = function() {
    celsius.value = (this.value - 32) * 5/9;
}

<form action="#">
    <input type="text" id="start" /> Celsius
    =
    <input type="text" id="finish" /> Fahrenheit
</form>

数字转换器JQuery

3 个答案: