Question

我在一个对象中有两个方法。我可以放入onclick的第一个'Basket.add（'clothing-item-name'）'。当用户点击时，它会将该项目的服装从参数“名称”添加到篮子工作区中的相应位置。

如何使用Basket.items（）在此处显示添加的项目，并在Basket.add中创建+1函数？

我试过.append（）;和.text（）;到div我想让项目每次增加1。我还写了一个单独的函数，它只更新了篮子总数，但没有采用上面的方法。

HTML-按钮

<button type="button" value="1" onclick="Basket.add('clothing-item-name')" id="add">ADD TO BASKET</button>

HTML - itinery（部分）

<li class="tShirt1"><a href="#">T-shirt 1 <span class="amount">  </span></a></li>

JS OBJECT

var Basket = (function () {

var _items = {};

return {
add: function (name) {
  if (_items.hasOwnProperty(name)) {
    _items[name] = _items[name] + 1;
  } else {
    _items[name] = 1;
  }
},

items: function () {
  return clone(_items);

  function clone(obj) {
    var target = {};
    for (var i in obj) {
      if (obj.hasOwnProperty(i)) {
        target[i] = obj[i];
      }
    }
    return target;
   }
  }
 };
}());

Answer 1

我不肯定我明白你在这里要做什么。是否只是在每次添加新项目时更新span.amount？如果是这样，你基本上可以做一些事情，比如在你添加/删除时调用某种'setItems'函数：

    var Basket = (function () {

    var _items = {};

    return {
        add: function (name) {
            if (_items.hasOwnProperty(name)) {
                _items[name] = _items[name] + 1;
            } else {
                _items[name] = 1;
            }

            this.setItems(name);
        },

        items: function () {
            return clone(_items);

            function clone(obj) {
                var target = {};
                for (var i in obj) {
                    if (obj.hasOwnProperty(i)) {
                        target[i] = obj[i];
                    }
                }
                return target;
            }
        },
        setItems: function (name) {
            $(".amount").text(_items[name]);
        }
    };
}());

You can check it out on this jsfiddle.

将Javascript对象方法调用到单击HTML - JS / Jquery

1 个答案: