jQuery根据文本输入字段乘以值

Question

我目前正在寻找一种方法，用于根据数字输入类型字段的输入来将2个不同的值相乘

这是我的代码：

    <div class="variation-price">
        <span class="amount">114.00</span>
        <span class="unit">50</span>
        <span class="weight">g</span>
    </div>

    <input type="number" id="quantity" class="input-text qty text" step="1" min="1" max="20" name="quantity" value="1" size="4" pattern="[0-9]*" inputmode="numeric">

根据我在输入字段中预先选择的值1，当前显示的是114.00 / 50 g，但是我希望此值根据输入的数字自动更改并相乘。

例如如果我输入数字2，输出应该更新为228.00 / 100 g，如果我输入3等，输出应该更新为342.00 / 150 g。

是否有快速简便的方法可以使用jQuery实现此目标？非常感谢一些专家的帮助，谢谢

Answer 1

您可以挂钩到输入的change事件并执行以下功能：

jQuery("#quantity").change(function(){
  var amount = parseFloat(jQuery(".amount").attr("data-init-amount"));
  var unit = parseFloat(jQuery(".unit").attr("data-init-unit"));
  var multiplier = parseInt(jQuery("#quantity").val());
  jQuery(".amount").html(amount * multiplier);
  jQuery(".unit").html(unit * multiplier);
});