如何用JavaScript实现数据库循环数据的动态价格计算？

问题背景 #

现有代码仅支持gb和display两类属性的价格计算，无法适配数据库返回的更多属性类别，需要改造为动态适配任意数量属性组的版本。

修改后的JavaScript代码 #

// 动态存储各属性组的价格，无需预先定义键
const values = {};

// 从HTML中动态获取所有属性组的类别
const getCategories = () => {
  return [...document.querySelectorAll('.feature-group')].map(el => el.dataset.category);
};

function PriceCalculator(label, newPrice) {
  // 存储当前属性组选中的价格
  values[label] = newPrice;
  
  const categories = getCategories();
  // 校验所有属性组是否均已选择
  const allSelected = categories.every(category => values[category] != null);
  
  if (allSelected) {
    // 计算所有属性价格的总和
    const total = Object.values(values).reduce((sum, price) => sum + price, 0);
    // 格式化为巴西雷亚尔货币格式
    const result = Number(total).toLocaleString("pt-BR", {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    });
    document.getElementById("money").textContent = result;
  } else {
    // 未选全时恢复初始提示
    document.getElementById("money").textContent = "Not calculated";
  }
}

修改后的HTML代码 #

<div id="form_step_1">
  <div class="container">
    <div class="row">
      <div class="talepler mb-3">
        <!-- GB属性组：新增feature-group容器与data-category标识 -->
        <div class="feature-group" data-category="gb">
          <h4>GB</h4>
          <div class="row mb-3" style="display: inline-block">
            <div class="col-sm-3 col-md-4 col-lg-3">
              <input class="inputs" type="radio"
                     id="gb-features-1"
                     name="1"
                     value="features-value-1"
                     data-money="-300"
                     data-product-money="2500"
                     data-category="gb"
                     data-price="-300"
                     onclick="PriceCalculator(this.dataset.category, Number(this.dataset.price))"
              >
              <label class="btn btn-pill" style="display: inline-block;" for="gb-features-1">16GB</label>
            </div>
            <div class="col-sm-3 col-md-4 col-lg-3">
              <input class="inputs" type="radio"
                     id="gb-features-2"
                     name="1"
                     value="features-value-2"
                     data-money="-200"
                     data-product-money="2500"
                     data-category="gb"
                     data-price="-200"
                     onclick="PriceCalculator(this.dataset.category, Number(this.dataset.price))"
              >
              <label class="btn btn-pill" style="display: inline-block;" for="gb-features-2">32GB</label>
            </div>
            <div class="col-sm-3 col-md-4 col-lg-3">
              <input class="inputs" type="radio"
                     id="gb-features-3"
                     name="1"
                     value="features-value-3"
                     data-money="-50"
                     data-product-money="2500"
                     data-category="gb"
                     data-price="-50"
                     onclick="PriceCalculator(this.dataset.category, Number(this.dataset.price))"
              >
              <label class="btn btn-pill" style="display: inline-block;" for="gb-features-3">64GB</label>
            </div>
          </div>
        </div>

        <!-- DISPLAY属性组：新增feature-group容器与data-category标识 -->
        <div class="feature-group" data-category="display">
          <h4>DISPLAY</h4>
          <div class="row mb-3" style="display: inline-block">
            <div class="col-sm-3 col-md-4 col-lg-3">
              <input class="inputs" type="radio"
                     id="display-features-1"
                     name="2"
                     value="features-value-1"
                     data-money="0"
                     data-product-money="2500"
                     data-category="display"
                     data-price="2500"
                     onclick="PriceCalculator(this.dataset.category, Number(this.dataset.price))"
              >
              <label class="btn btn-pill" style="display: inline-block;" for="display-features-1">Durable</label>
            </div>
            <div class="col-sm-3 col-md-4 col-lg-3">
              <input class="inputs" type="radio"
                     id="display-features-2"
                     name="2"
                     value="features-value-2"
                     data-money="-1500"
                     data-product-money="2500"
                     data-category="display"
                     data-price="1500"
                     onclick="PriceCalculator(this.dataset.category, Number(this.dataset.price))"
              >
              <label class="btn btn-pill" style="display: inline-block;" for="display-features-2">Broken</label>
            </div>
          </div>
        </div>

        <!-- 新增属性组示例：直接复制该结构即可，无需修改JS -->
        <!-- <div class="feature-group" data-category="battery">
          <h4>BATTERY</h4>
          <div class="row mb-3" style="display: inline-block">
            <div class="col-sm-3 col-md-4 col-lg-3">
              <input class="inputs" type="radio"
                     id="battery-features-1"
                     name="3"
                     value="features-value-1"
                     data-money="0"
                     data-product-money="2500"
                     data-category="battery"
                     data-price="0"
                     onclick="PriceCalculator(this.dataset.category, Number(this.dataset.price))"
              >
              <label class="btn btn-pill" style="display: inline-block;" for="battery-features-1">Healthy</label>
            </div>
          </div>
        </div> -->
      </div>
    </div>
    <div style="position:absolute; right: 0px;">
      <div style="display: inline-block; margin-right: 20px">
        <strong>Pre-bid price:</strong> 
        <div style="display: inline-block" id="money">Not calculated</div>
      </div>
    </div>
  </div>
</div>

核心改动说明 #

1. 动态属性识别：通过HTML中的feature-group容器和data-category属性，让JS自动识别所有属性类别，无需预先定义
2. 灵活价格计算：使用Object.values().reduce()求和，适配任意数量的属性组
3. 扩展性优化：新增属性组时，只需复制现有feature-group结构并修改标识，无需改动JS代码
4. 修复ID重复问题：给单选按钮添加唯一ID，确保label与input正确关联

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