Question

我正在建设一个电子商店。我正在使用把手在HTML中显示产品列表。

对于每个元素我都添加了一个按钮，允许用户在购物车中添加该项目。它没有用，因为每次点击按钮我都会添加所有列表，而不仅仅是单个对象。

所以我知道我正在传递所有列表（因为我传递'list'作为参数），我想知道如何只为每个按钮传递当前项目。我不知道该怎么做。

HTML：

  <div class="container-fluid">
    <script id="list-items" type="text/x-handlebars-template">
      {{#each list}}
        <div class="items col-lg-3 col-md-4 col-sm-6 col-xs-12">
          Category: {{ category}} </br>
          Name: {{ name }} </br>
          Price: {{ price }} </br>
          Quantity: {{ quantity }}
          <button class="addItem" class="btn">Buy</button>
        </div>
      {{/each}}
    </script>
  </div>

的javascript：

var ShoppingCart = function () {
  this.cart = [];
};

ShoppingCart.prototype.addItem = function(item) {
  this.cart.push(item);
};


shoppingCart = new ShoppingCart();

$('.addItem').click(function() {
  shoppingCart.addItem(list);
});

Answer 1

在您的点击功能中，您可以准确添加整个列表：

shoppingCart.addItem(list);

您无需转移要添加的整个项目。由于您已在范围中拥有整个列表，因此您只需要让您的函数知道所选索引的内容。可能的解决方案可能是通过把手将索引添加到按钮ID中，然后在jQuery中解析它并继续或考虑用纯javascript解决方案替换jQuery方式订阅点击事件，并在车把的帮助下插入项目的索引，在方式：

<button class="addItem" class="btn" onclick="addItem({{@index}})">Buy</button>

addItem的位置：

function addItem(index) {
  shoppingCart.addItem(list[index]);
}

Answer 2

我猜你可以用项目ID（或其他地方指出的索引）对此进行排序：

<button id="{{ @index }}" class="addItem" class="btn">Buy</button>

$('.addItem').click(function() {
  shoppingCart.addItem(list[$(this).id]);
});

每次迭代时在把手内选择带有jquery的元素

2 个答案: