纯粹的购物车

时间:2017-10-11 13:31:36

标签: javascript html shopping-cart

我正在尝试用纯JS制作购物车。我正在尝试用我的产品和按钮动态创建一些div来增加/减少/删除它们,但我被卡住了。下面是我创建这些div的函数:

function displayCart() {
let output = '';
for (let i in cart) {
    output += '<div class="card card-body cartc">' + '<p>' +
        '<span id="' + cart[i].name + '">' + cart[i].name + '</span>' +
        '<button class="minus">-</button>' +
        ' ' + cart[i].count + ' шт.' +
        '<button class="plus">+</button>' +
        '<button class="delete">x</button>' +
        '</p>' + '</div>';
};
document.querySelector('.cart').innerHTML = output;
document.querySelector('.total').innerHTML = totalCost();}

所以下一步是将事件放在按钮上。

document.addEventListener("click", function (event) {
if (document.querySelector('.minus')) {
    let name = this.querySelector('.cartc span').getAttribute("id");
    removeItemFromCart(name);
    displayCart();
}});

如您所见,它找到第一个.cart span id并将其返回给removeItemFromCart(),但此函数应该在我创建的每个div中工作,而不仅仅是第一个。怎么解决?

您可以在https://enoltc.github.io/hw-2/https://github.com/ENoLTC/hw-2/查看整个项目 Creating a Shopping Cart using only HTML/JavaScript 不同之处在于我想用纯JavaScript编写我的脚本,而不使用simpleCart或jQuery。

1 个答案:

答案 0 :(得分:0)

所以我这样做了

$this->Paginator->settings = array(
                                          'Survey' => array(
                                                        'limit' => 5,
                                                        'order' => 'created desc',
                                                        'conditions'=>array('is_deleted'=> 0)
                                                       )
                                       );
          $numbers = $this->Paginator->paginate('Survey');
          $this->set(compact('numbers'));