如何用JavaScript实现商品多规格选择的代码
时间: 2023-05-20 15:01:19 浏览: 127
可以使用以下代码实现商品多规格选择:
```javascript
// 定义商品规格数据
var specs = [
{
name: '颜色',
values: ['红色', '蓝色', '绿色']
},
{
name: '尺寸',
values: ['S', 'M', 'L', 'XL']
}
];
// 定义商品数据
var products = [
{
id: 1,
name: '商品1',
price: 100,
specs: [
{ name: '颜色', value: '红色' },
{ name: '尺寸', value: 'S' }
]
},
{
id: 2,
name: '商品2',
price: 200,
specs: [
{ name: '颜色', value: '蓝色' },
{ name: '尺寸', value: 'M' }
]
},
{
id: 3,
name: '商品3',
price: 300,
specs: [
{ name: '颜色', value: '绿色' },
{ name: '尺寸', value: 'L' }
]
}
];
// 定义选择的规格数据
var selectedSpecs = {};
// 选择规格
function selectSpec(name, value) {
selectedSpecs[name] = value;
updateProduct();
}
// 更新商品信息
function updateProduct() {
var product = null;
for (var i = 0; i < products.length; i++) {
var p = products[i];
var match = true;
for (var j = 0; j < p.specs.length; j++) {
var spec = p.specs[j];
if (selectedSpecs[spec.name] !== spec.value) {
match = false;
break;
}
}
if (match) {
product = p;
break;
}
}
if (product) {
// 显示商品信息
console.log('商品名称:' + product.name);
console.log('商品价格:' + product.price);
} else {
// 没有匹配的商品
console.log('没有匹配的商品');
}
}
// 初始化规格选择器
function initSpecSelector() {
var container = document.getElementById('spec-selector');
for (var i = 0; i < specs.length; i++) {
var spec = specs[i];
var specContainer = document.createElement('div');
specContainer.innerHTML = '<div>' + spec.name + '</div>';
for (var j = 0; j < spec.values.length; j++) {
var value = spec.values[j];
var valueButton = document.createElement('button');
valueButton.innerHTML = value;
valueButton.onclick = (function(name, value) {
return function() {
selectSpec(name, value);
};
})(spec.name, value);
specContainer.appendChild(valueButton);
}
container.appendChild(specContainer);
}
}
// 初始化页面
function initPage() {
initSpecSelector();
updateProduct();
}
initPage();
```
在这个代码中,我们定义了商品规格数据和商品数据,然后通过选择规格来匹配商品,并显示商品信息。我们使用了一个对象来保存选择的规格数据,然后在选择规格时更新这个对象,然后通过遍历商品数据来匹配商品,最后显示匹配的商品信息。我们还定义了一个初始化规格选择器的函数和一个初始化页面的函数,用来初始化页面和规格选择器。