基于jQuery实现输入框数值赋值到span的硬币金额计算需求

嘿，这个需求用jQuery实现起来很直观，我给你整理好完整的代码和说明：

先确认依赖 #

首先得保证你的页面已经引入了jQuery库（可以用本地文件或者官方CDN，这里就不贴外链啦）。

保留你的原有HTML结构（我加了个小优化） #

<form>
  <!-- 加了min属性对应placeholder里的最低100枚限制，浏览器会自动做基础校验 -->
  <input type="number" placeholder="Min. - 100 coins" id="boughtamount" min="100">
</form>
<div class="finalpriceforitem">
  <b><span class="res_sum">0</span>&nbsp;USD</b>
</div>

核心jQuery代码 #

$(document).ready(function() {
  // 给输入框绑定input事件，用户输入/粘贴/删除内容时都会触发
  $('#boughtamount').on('input', function() {
    // 获取输入的数量，转成整数，空值或非数字时默认取0
    const coinQuantity = parseInt($(this).val()) || 0;
    // 计算总金额：数量 × 单枚价格1.25美元
    const totalAmount = coinQuantity * 1.25;
    // 更新到目标span标签里
    $('.res_sum').text(totalAmount);
  });
});

为什么这么写？ #

• $(document).ready()确保DOM完全加载后再执行脚本，避免找不到输入框或者span的问题
• 用input事件比keyup更全面，能覆盖用户粘贴内容、用鼠标修改输入框的场景
• parseInt(...) || 0处理了空输入或者非数字输入的情况，防止出现NaN（非数字）的显示问题
• 当用户输入500时，计算500×1.25=625，会自动更新到res_sum的span里，完全符合你的要求

内容的提问来源于stack exchange，提问作者FuryMaxim