当前位置：首页 > JavaScript

js商品规格实现

2026-04-07 07:23:48JavaScript

商品规格实现（JavaScript）

数据结构设计

使用嵌套对象或数组存储规格信息，例如：

const specs = {
  "颜色": ["红色", "蓝色", "黑色"],
  "内存": ["64GB", "128GB", "256GB"],
  "版本": ["标准版", "Pro版"]
}

动态渲染规格选择

通过遍历数据结构生成DOM元素：

js商品规格实现

function renderSpecs() {
  const container = document.getElementById('spec-container');
  Object.keys(specs).forEach(key => {
    const specGroup = document.createElement('div');
    specGroup.innerHTML = `<h3>${key}</h3>`;

    specs[key].forEach(value => {
      const btn = document.createElement('button');
      btn.textContent = value;
      btn.onclick = () => selectSpec(key, value);
      specGroup.appendChild(btn);
    });

    container.appendChild(specGroup);
  });
}

规格选择逻辑

维护已选规格的状态对象：

let selectedSpecs = {};

function selectSpec(key, value) {
  selectedSpecs[key] = value;
  checkAvailability();
  updatePrice();
}

库存校验

根据组合规格检查库存：

js商品规格实现

const inventory = {
  "红色_64GB_标准版": 10,
  "蓝色_128GB_Pro版": 5
};

function checkAvailability() {
  const specKey = Object.values(selectedSpecs).join('_');
  return inventory[specKey] > 0;
}

价格计算

根据规格组合动态计算价格：

const priceMatrix = {
  "64GB": { "标准版": 3999, "Pro版": 4599 },
  "128GB": { "标准版": 4299, "Pro版": 4999 }
};

function updatePrice() {
  if (selectedSpecs.内存 && selectedSpecs.版本) {
    const price = priceMatrix[selectedSpecs.内存][selectedSpecs.版本];
    document.getElementById('price').textContent = price;
  }
}

交互优化

添加视觉反馈和禁用状态：

function updateUI() {
  const allButtons = document.querySelectorAll('#spec-container button');
  allButtons.forEach(btn => {
    btn.classList.remove('active', 'disabled');

    const [key, value] = btn.dataset.spec.split('|');
    if (selectedSpecs[key] === value) {
      btn.classList.add('active');
    }

    if (!isSpecAvailable(key, value)) {
      btn.classList.add('disabled');
    }
  });
}