Question

我正在为我的HTML游戏制作一个商店系统，我想这样做，以便当你点击一个项目时，它获得id，并将该项目的变量降低1。

if(e.shiftKey && inShop[this.id] === 0) {
    coins = coins+price[this.id]
    coinUpdate();
    [this.id]--;    
}

var fish1 = 1

<html>
    <img class="item cookable" id="fish1" src="source">
</html>

例如，当我点击一条鱼时，我希望它降低您的库存中有多少鱼的变量。因此，我需要更改具有相同名称的变量中的[this.id]。

Answer 1

JS中的所有全局变量都是在window对象上创建的。如果您有每个ID的变量，那么您只需要执行window[this.id]--或window[this.id]++。无论如何，在JavaScript中，Window对象充当全局命名空间，并且通常使用变量使全局命名空间混乱是不好的做法。您应该创建一个包含所有项目计数器的新对象（例如items），并且对于添加的每个项目，您可以在删除它们时执行items[this.id]++或items[this.id]--

Answer 2

[this.id]--无效。这使得一个数组具有单个元素（由this.id引用的字符串），并尝试递减该数组。减少数组没有多大意义。

你不能像这样动态地访问局部变量（在某些情况下你可以，但实际上你不应该）。但是，可以使用属性来执行此操作，因此您必须重新调整一些内容。

如何存储您在对象中拥有的所有内容，可以将其称为inventory。

var inventory = {
    fish1: 10,
    fish2: 5,
    worms: 3
};

现在你使用减量方法只需稍微调整一下：

if(e.shiftKey && inShop[this.id] === 0) {
    coins = coins+price[this.id]
    coinUpdate();
    inventory[this.id]--; // decrement an item count in your inventory
}

Answer 3

请勿使用window方法。它仅适用于global变量。

全局变量定义为some_var = 10;而不是var some_var = 10;如果你来自桌面编程背景，你会发现JS hella中的全局变量很难。

相反，使用命名空间或对象（此方法）。

像这样定义您的库存：

var inventory = {
    goldfish: 10,
    seahorse: 10,
    jellyfish: 10
}

对于HTML，ID方法没问题，但为什么不使用data属性呢？它可以保存元数据，非常适合这种情况。

<img src="//placehold.it/32x32" class="item cookable" data-type="fish">

通过.data方法将访问权限内置到jQuery中，因此当您需要根据所点击的内容减少或增加数量时，只需在必要时使用以下内容：

// Fetch the "type" of fish from the data attribute
var type = $(this).data("type");

// And update the inventory
inventory[type]--;

将data属性用于其他元数据data-foo="hello" data-bar="world"

这些可以使用jQuery .data()作为对象获取，它将返回{foo: "hello", bar: "world"} or fetch them individually by passing the data name。data（“foo”）`

就个人而言，我会使用此而不是ID。

如何根据单击的对象的id调整变量？

3 个答案: