“监听”滑块/文本字段的更改并更新第二个文本字段

Question

我有两个滑块用于更新文本字段中的金额，一个用于金额，一个用于存款。我已经完成了以下操作（我确信这很啰嗦，并且有更好的方法）：

var amount = $("input[name='amount']").val();
var amountdiv = amount.substring(1, amount.length);
var depositper = amountdiv / 100 * 20
$(depositper).prepend('£');
$("input[name='deposit']").val(depositper);

但是，它只能计算出金额字段的 20%，因为在设置存款字段之前我似乎无法正确获取前置部分（substr 和 prepend 将删除然后重新添加英镑符号所以数学可以发生）。我还希望它随着金额字段中的值更新而动态变化 - 这可能吗？

任何帮助表示赞赏。

Answer 1

您可以只使用字符串连接或template literals 来添加井号。

只要每次金额更改时都会更改，您可以将“重新计算”放入一个函数中，并在每次金额值更改时调用该函数。

我已将您的子字符串替换为replace(/#/g, '')，这将删除字符串中的所有井号符号。使用这种方法，只要在amount 字段中输入一个数字，计算仍然有效。

function calculateDeposit() {
  var amount = $("input[name='amount']").val();
  var amountdiv = amount.replace(/#/g, '');     //remove all # symbols
  var depositper = `#${amountdiv / 100 * 20}`;  //prepend # (see Template Literals documentation above)

  $("input[name='deposit']").val(depositper);
}

$("input[name='amount']").change(calculateDeposit); //When the amount field changes, call calculateDeposit()

input { display: block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Amount: <input type="text" name="amount" />
Deposit: <input type="text" name="deposit" />

如果您希望每次按键都更新存款，那么您可以将事件侦听器从 .change() 事件更改为 .keyup() 事件。