JavaScript中如何根据输入数值匹配区间获取对应价格？

没问题，我来帮你搞定这个需求。首先咱们先理清楚核心逻辑：拿到输入的整数数量，匹配对应的价格区间，然后算出总价。下面是具体的实现步骤和代码：

第一步：整理价格数据（可选但更清晰） #

你给出的价格对象键带空格，虽然能直接用，但咱们可以把它转换成更易处理的结构，比如每个区间对应一个包含最小值、最大值和单价的对象数组，这样判断起来更直观：

// 整理后的价格区间数据，比原对象更便于区间判断
const priceRanges = [
  { min: 1, max: 4, price: 10.00 },
  { min: 5, max: 24, price: 7.20 },
  { min: 25, max: 49, price: 6.00 },
  { min: 50, max: Infinity, price: 5.80 } // 50+ 用Infinity表示无上限
];

当然如果你不想改原数据，也可以直接遍历原对象的键来解析区间，不过上面的结构可读性更好。

第二步：完善输入事件处理逻辑 #

接下来咱们把原有的代码补全，加上区间匹配和总价计算的逻辑，还要注意输入验证（确保是正整数，因为数量不能是负数或小数）：

// 先定义一个验证正整数的函数（替代你原代码里的isInteger，避免歧义）
function isPositiveInteger(num) {
  return Number.isInteger(Number(num)) && Number(num) > 0;
}

$('.input-box').change(function(){ 
  const inputVal = $(this).val().trim(); // 先去掉前后空格
  const num = Number(inputVal);

  if (isPositiveInteger(num)) {
    let unitPrice = 0;
    // 遍历价格区间找到匹配的单价
    for (const range of priceRanges) {
      if (num >= range.min && num <= range.max) {
        unitPrice = range.price;
        break; // 找到匹配区间就停止遍历
      }
    }

    // 计算总价（这里可以根据需求把总价展示到页面上，比如放到某个元素里）
    const totalPrice = (num * unitPrice).toFixed(2); // 保留两位小数
    console.log(`数量${num}的总价是：$${totalPrice}`);
    // 示例：把总价显示到页面
    // $('.total-price').text(`$${totalPrice}`);
  } else {
    // 输入不合法的提示
    console.log('请输入有效的正整数数量');
    // 示例：清空总价显示
    // $('.total-price').text('');
  }
});

如果你想直接用原价格对象（不转换结构） #

如果不想修改原数据结构，也可以这样解析原对象的键来判断区间：

const priceData = {" 1–4 ": " $10.00 ", " 5–24 ": " $7.20 ", " 25–49 ": " $6.00 ", " 50+ ": " $5.80 "};

$('.input-box').change(function(){ 
  const inputVal = $(this).val().trim();
  const num = Number(inputVal);

  if (isPositiveInteger(num)) {
    let unitPrice = 0;
    // 遍历原对象的键值对
    for (const [rangeStr, priceStr] of Object.entries(priceData)) {
      const cleanedRange = rangeStr.trim();
      const cleanedPrice = parseFloat(priceStr.trim().replace('$', ''));
      
      if (cleanedRange.includes('+')) {
        // 处理50+的情况
        const min = parseInt(cleanedRange.split('+')[0]);
        if (num >= min) {
          unitPrice = cleanedPrice;
          break;
        }
      } else {
        // 处理有上下限的区间
        const [minStr, maxStr] = cleanedRange.split('–');
        const min = parseInt(minStr);
        const max = parseInt(maxStr);
        if (num >= min && num <= max) {
          unitPrice = cleanedPrice;
          break;
        }
      }
    }

    const totalPrice = (num * unitPrice).toFixed(2);
    console.log(`总价：$${totalPrice}`);
  } else {
    console.log('请输入正整数');
  }
});

一些额外的小建议 #

• 可以在输入框的input事件也绑定这个逻辑，这样用户输入时实时更新总价，体验更好，而不只是change事件（change是失去焦点才触发）。
• 输入验证可以加上前端的HTML属性，比如给输入框加type="number"和min="1"，减少非法输入的可能：<input class="input-box" type="number" min="1" step="1">

内容的提问来源于stack exchange，提问作者Top-Bot