Question

我正在使用ES6开发一个简单的网络游戏。有一个物品清单，玩家可以通过单击列表来购买物品。代码如下：

index.html

class ItemA() {...}
class ItemB() {...}
class ItemC() {...}

items.js

myItems = [];

$('#a').on('click', () => {
  let item  = new ItemA();
  myItems.push(item);
});

$('#b').on('click', () => {
  let item  = new ItemB();
  myItems.push(item);
});

$('#c').on('click', () => {
  let item = new ItemC();
  myItems.push(item);
});

index.js

cd ~-

我当然可以做这项工作。但是，如果项目数为100或更多，则我应该编写100或更多的事件侦听器。我该如何解决这个问题？

Answer 1

您可以创建一个对象，其中键为id，值为类。

class ItemA {}
class ItemB {}
class ItemC {}

let items = {
  a: ItemA,
  b: ItemB,
  c: ItemC
}

let myItems = []

$("li").click(function() {
  let id = $(this).attr("id");
  myItems.push(new items[id]);
  console.log(myItems)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li id="a">item A</li>
  <li id="b">item B</li>
  <li id="c">item C</li>
</ul>

如何基于ES6中的单击元素创建新对象？

1 个答案: