javascript - 单击时调用变量函数

Question

我正在尝试在我正在构建的冒险游戏中触发元素效果，但我似乎不知道该怎么做。基本上，当单击时，我希望无论哪个元素都运行其效果函数。我很困惑。

    function showItems() {
      for (var i = 0; i < items.length; i++) {
        playerUi.innerHTML += '<div class="item-container"><a href="#" 
    class="item-name" onclick="items[i].effect">' + items[i].name + '</a><br 
    /><p class="desc-p">' + items[i].description + '<br />Value: ' + 
    items[i].price + '</p></div>';
      }
    }

    // Shows the inventory interface.
    $('#inv-btn').on('click', function() {
      playerUi.innerHTML = '<h3>Your Inventory:</h3>';
      showItems();
      playerUi.innerHTML += '<br /><br /><div class="gold-box">Gold: ' + 
    player.gold + '</div>';
    });

以下是我目前的元素代码:

    // I  T  E  M  S
    function invItem(name, type, desc, price, eff) {
      this.name = name;
      this.type = type;
      this.description = desc;
      this.price = price;
      this.effect = eff;
    };

    var weakPotion = new invItem('Weak Potion', 'Consumable', 'A weak health 
    potion.', 10, healSelf(20));
    var brewersPotion = new invItem('Brewers Potion', 'Consumable', 'A 
    standard health potion.', 23, healSelf(45));

    function healSelf(amt) {
      if (player.currentHealth < player.maxHealth) {
        player.currentHealth += amt;
        if (player.currentHealth >= player.maxHealth) {
          player.currentHealth = player.maxHealth;
        }
      }
    }

查看我目前对此的了解click here .

下面是我的播放器对象。

    // Create our player object.
    var player = new Object();
    player.gold = 0;
    player.level = 1;
    player.strength = 5;
    player.intellect = 5;
    player.endurance = 5;
    player.agility = 5;
    player.currentExp = 0;
    player.reqExp = 100;
    player.skillPoints = 0;
    player.attPoints = 2;
    player.maxHealth = 0;
    player.currentHealth = 0;
    player.maxMana = 0;
    player.currentMana = 0;

Answer 1

让我们从头开始。这一行

var weakPotion 
     = new invItem('Weak Potion', 'Consumable', 'A weak health potion.', 10, healSelf(20));

已经没有做你想的那样了!它将立即执行该函数 - 这不是您想要做的。相反，您应该存储对要执行的函数的引用。通过返回一个稍后调用的新函数来修复它

function healSelf(amt) {
  return function(){
    if (player.currentHealth < player.maxHealth) {
      player.currentHealth += amt;
      if (player.currentHealth >= player.maxHealth) {
        player.currentHealth = player.maxHealth;
      }
    }
  }
}

接下来，当您传递对函数的引用时，要稍后执行该函数，请使用括号:

onclick="items[i].effect()"

但这仍然不起作用 - items[i] 仅存在于循环中 - 不存在于页面运行时。解决此问题的一种方法是不直接附加 onclick(尤其是使用 jQuery 时)，而是使用 index() 将单击处理程序附加到这些链接以查找正确的 元素

function showItems() {
  for (var i = 0; i < items.length; i++) {
    playerUi.innerHTML += '<div class="item-container"><a href="#" class="item-name">' + items[i].name + '</a><br /><p class="desc-p">' + items[i].description + '<br />Value: ' + items[i].price + '</p></div>';
  }
}

以及其他地方

$(document).on('click','.item-name',function(){
   var index = $(this).index();
   items[index].effect();
});