Javascript-响应式商店;多个项目-每个项目具有不同的价格值
Javascript - Responsive shop ; multiple items - each item with different price values
目前我正在为我的商店链接使用这个插件
在它的javascript代码中,有一个项目列表,我可以在其中定义自己的项目
var items = [{
id: '1',
title: 'Lake',
thumb: 'img/thumb/1.jpg',
image: 'img/1.jpg',
price: 2.99,
photographer: 'Bob',
tag: 'myTag',
description: 'Et '
}, {
id: '2',
title: 'Travel',
thumb: 'img/thumb/2.jpg',
image: 'img/2.jpg',
price: 3.99,
photographer: 'Paolo',
tag: 'myTag',
description: 'Vidit'
}, {
id: '3',
title: 'Mountains',
thumb: 'img/thumb/3.jpg',
image: 'img/3.jpg',
price: 1.40,
photographer: 'Michele',
tag: 'myTag',
description: 'Causae '
}, {
id: '4',
title: 'Paris',
thumb: 'img/thumb/4.jpg',
image: 'img/4.jpg',
price: 5.88,
photographer: 'Ettore',
tag: 'myTag',
description: 'Cu'
}, {
id: '5',
title: 'Passion',
thumb: 'img/thumb/5.jpg',
image: 'img/5.jpg',
price: 1.99,
photographer: 'paolo',
tag: 'myTag',
description: 'Vidit'
}, {
id: '6',
title: 'Map',
thumb: 'img/thumb/6.jpg',
image: 'img/6.jpg',
price: 1.99,
photographer: 'Bob',
tag: 'myTag',
description: 'Vidit'
}, {
id: '7',
title: 'Cappuccino',
thumb: 'img/thumb/7.jpg',
image: 'img/7.jpg',
price: 2.99,
photographer: 'Gino',
tag: 'myTag',
description: 'Et'
}, {
id: '8',
title: 'Pier',
thumb: 'img/thumb/8.jpg',
image: 'img/8.jpg',
price: 3.99,
photographer: 'Michele',
tag: 'myTag',
description: 'Vidit'
}, {
id: '9',
title: 'Fog',
thumb: 'img/thumb/9.jpg',
image: 'img/9.jpg',
price: 1.40,
photographer: 'Bob',
tag: 'myTag',
description: 'Causae'
}, {
id: '10',
title: 'Bear',
thumb: 'img/thumb/10.jpg',
image: 'img/10.jpg',
price: 9.99,
photographer: 'Ettore',
tag: 'myTag',
description: 'Cu '
}, {
id: '11',
title: 'Houses',
thumb: 'img/thumb/11.jpg',
image: 'img/11.jpg',
price: 3.78,
photographer: 'Gino',
tag: 'myTag',
description: 'Has'
}, {
id: '12',
title: 'Skyline',
thumb: 'img/thumb/12.jpg',
image: 'img/12.jpg',
price: 1.99,
photographer: 'Paolo',
tag: 'myTag',
description: ''
}, {
id: '13',
title: 'X100S',
thumb: 'img/thumb/13.jpg',
image: 'img/13.jpg',
price: 2.99,
photographer: 'Gino',
tag: 'myTag',
description: 'Et'
}, {
id: '14',
title: 'Trains',
thumb: 'img/thumb/14.jpg',
image: 'img/14.jpg',
price: 3.99,
photographer: 'paolo',
tag: 'myTag',
description: 'Vidit'
}, {
id: '15',
title: 'Library',
thumb: 'img/thumb/15.jpg',
image: 'img/15.jpg',
price: 1.40,
photographer: 'Michele',
tag: 'myTag',
description: ''
}, {
id: '16',
title: 'Rock''nRoll',
thumb: 'img/thumb/16.jpg',
image: 'img/16.jpg',
price: 0.78,
photographer: 'Ettore',
tag: 'myTag',
description: 'Cu '
}, {
id: '17',
title: 'Palm''s Beach',
thumb: 'img/thumb/17.jpg',
image: 'img/17.jpg',
price: 7.90,
photographer: 'Gino',
tag: 'myTag',
description: 'Has.'
}
];
我想更改格式,让一件商品有多个价格(根据打印尺寸)。我一直在尝试使用代码,但我不知道如何为一件商品设定多个价格。
这是完整的Javascript代码-http://pastebin.com/62PJFf8M
在我的html中:我有这个,所以每张照片都有几个价格选项。但问题是,现在每张照片的按钮都有相同的id。。
<div class="infos">
<h4 class="name text-info"><%= title %></h4>
<button id="addCart" class="btn btn-danger btn-sm"><i class="fa fa-shopping-cart"></i> Hi Res </button>
<button id="addCart" class="btn btn-danger btn-sm"><i class="fa fa-shopping-cart"></i> 10 x 15</button>
<button id="addCart" class="btn btn-danger btn-sm"><i class="fa fa-shopping-cart"></i> 13 x 18</button>
<button id="addCart" class="btn btn-danger btn-sm"><i class="fa fa-shopping-cart"></i> A4</button>
<button id="addCart" class="btn btn-danger btn-sm"><i class="fa fa-shopping-cart"></i> A3</button>
</div>
您可以使用价格数组,就像这里的最后一项一样。
var items = [{
id: '14',
title: 'Trains',
thumb: 'img/thumb/14.jpg',
image: 'img/14.jpg',
price: 3.99,
photographer: 'paolo',
tag: 'myTag',
description: 'Vidit'
}, {
id: '15',
title: 'Library',
thumb: 'img/thumb/15.jpg',
image: 'img/15.jpg',
price: 1.40,
photographer: 'Michele',
tag: 'myTag',
description: ''
}, {
id: '16',
title: 'Rock''nRoll',
thumb: 'img/thumb/16.jpg',
image: 'img/16.jpg',
price: 0.78,
photographer: 'Ettore',
tag: 'myTag',
description: 'Cu '
}, {
id: '17',
title: 'Palm''s Beach',
thumb: 'img/thumb/17.jpg',
image: 'img/17.jpg',
price: [7.90, 1, 2, 3],
photographer: 'Gino',
tag: 'myTag',
description: 'Has.'
}
];
for (var i of items)
{
console.log(i.id)
console.log(i.price)
}
您可以通过循环您的物品对象来添加新价格,如下所示:
for(var i = 0; i < items.length; i++){
items[i].newprice = 10.00;
}
向对象添加newprice
属性与object.newproperty =
一样微不足道
Fiddle
相关文章:
- 正在将数据主题添加到所有项目
- 动态地改变“”的URL;添加新项目”;链接使用javascript/jquery
- 如何检查管道中未定义的项目
- 有没有一种方法可以添加相同的项目val=“0”;4〃;到JavaScript中数组的每个对象
- 学生搜索项目jquery/javascript
- 如何获取不属于我项目的上一页的URL
- 在上一次响应时隐藏Qualtrics项目-Javascript
- Javascript-响应式商店;多个项目-每个项目具有不同的价格值
- 谷歌表单:将项目添加到响应中
- 在 Angular 项目中迭代 JSON 响应以创建新的 $scope obj 我可以在应用程序中使用的
- 可以'在sails.js+angularjs项目中无法使DataTables响应
- 改进RoR项目的时间响应
- 如何在响应式网站中正确布局网格项目
- 如何停止具有混合高度、一列或两列、Bootstrap旋转木马项目的反弹响应页面
- 如何在响应式jCarousel上选择可见项目的数量
- 我将项目推入数组,但脚本变得无响应
- 修复了当项目数量超过容器宽度时的动态响应导航
- 在Qualtrics调查中,单击下一个按钮时,如何将对项目的响应保存到嵌入数据中
- 当我在下拉菜单中选择一个项目时,响应不带javascript
- ngOptions尝试将资源响应用作所选项目时的怪异行为