Javascript-响应式商店;多个项目-每个项目具有不同的价格值

Javascript - Responsive shop ; multiple items - each item with different price values

本文关键字:项目 响应 Javascript-      更新时间:2023-09-26

目前我正在为我的商店链接使用这个插件

在它的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