在Next.js中如何根据select下拉框的选中选项渲染动态价格？

1. 优化逻辑思路 #

不用硬编码大量if判断，改用配置映射表实现，后续改价格、加段位都不用动逻辑代码，维护成本更低。

2. 新增价格展示节点 #

先在HTML里加价格展示的区域，样式可自行调整：

<div className="mt-8 text-xl font-bold text-red-500">
  预估价格：<span id="priceShow">0</span> 元
</div>

3. 编写价格计算逻辑 #

在你的JS代码里加入如下配置和计算函数：

// 段位权重映射，用于计算段位差
const rankWeight = {
  ironn: 0,
  bronze: 4,
  silverr: 8,
  goldd: 12,
  platt: 16,
  diaa: 20
}
// 分段权重映射
const tierWeight = {
  44: 0,
  33: 1,
  22: 2,
  11: 3
}
// 每个小段位的单价，可根据你的实际定价修改
const pricePerTier = 20;

// 价格计算函数
function calcTotalPrice() {
  // 读取当前段位选择值
  const currentRank = document.getElementById('listt').value;
  const currentTier = document.getElementById('tierr').value;
  // 读取目标段位选择值，注意把下面的id替换成你实际目标段位下拉框的id
  const targetRank = document.getElementById('targetRank').value;
  const targetTier = document.getElementById('targetTier').value;

  // 计算当前段位和目标段位的总权重
  const currentTotalWeight = rankWeight[currentRank] + tierWeight[currentTier];
  const targetTotalWeight = rankWeight[targetRank] + tierWeight[targetTier];

  // 目标段位不高于当前段位时价格为0，否则按差值计算总价
  const finalPrice = targetTotalWeight > currentTotalWeight ? (targetTotalWeight - currentTotalWeight) * pricePerTier : 0;
  // 更新页面价格显示
  document.getElementById('priceShow').innerText = finalPrice;
}

4. 绑定事件触发 #

在你现有的slbz2 onChange事件处理函数里调用价格计算函数即可：

function slbz2() {
  // 你原有切换图片的逻辑保留
  // ...

  // 新增调用价格计算
  calcTotalPrice();
}

自定义定价适配 #

如果不同大段之间的单价不同（比如Iron升Bronze每小段15元，Bronze升Silver每小段20元），可修改配置表为区间定价即可，不用修改核心逻辑。

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