Question

如果这个标题毫无意义，请详细说明。

我有一个名为 area 的两个对象和一个名为 enemy 的对象。

每个区域都有自己的敌人，所以我为每个区域制作了敌人的原型。

接下来，我在每个区域原型上都执行了if no response in 5 seconds, move to next element in the array功能，因此如果用户点击一个按钮，他们就会显示一个“区域”列表，他们可以从中进行探索。

给我一个错误的主要部分是我尝试任何函数，如array.push();

如何使用按钮显示特定的敌人名字？

请不要jQuery

alert(areas[0].enemies[0].name);

Answer 1

它会给你一个错误，因为areas[0].enemies不是一个数组 - 它是一个对象。

{
    bat: new enemy("Bat", "Flying"),
    snake: new enemy("Snake", "Ground"),
}

将其更改为

for(var key in areas[j].enemies) {
    alert(areas[j].enemies[key].name);
}

Answer 2

enemies是一个对象，而不是一个数组，所以你需要遍历keys 并从那里获取而不是从索引中获取，只是使用它更新了您的代码段，但代码可以更好。

＆＃13;

function area(name, enemies){
    this.name = name;
    this.enemies = enemies;
}

function enemy(name, type){
    this.name = name;
    this.type = type;
}

var cave = new area ("Cave", {
    bat: new enemy("Bat", "Flying"),
    snake: new enemy("Snake", "Ground"),
});

var forest = new area ("Forest", {
    bear: new enemy("Bear", "Animal"),
    coyote: new enemy("Coyote", "Wolf"),
});
areas = [];
areas.push(cave, forest);

var thatBtn = document.getElementById('thatBtn'),
    display = document.getElementById('display');

thatBtn.addEventListener('click', function(){
  for(i=0; i < areas.length; i++){
    var li = document.createElement('li'),
        liBtn = document.createElement('button');
    liBtn.textContent = areas[i].name;
    li.appendChild(liBtn);
    display.appendChild(li);
    
    liBtn.addEventListener('click', function(){
      for(j=0; j < areas.length; j++){
        if (areas[j].name == event.target.textContent){
          alert(areas[j].name);
          var keys = Object.keys(areas[j].enemies);
          for(k=0; k < Object.keys(areas[j].enemies).length; k++){
            alert(areas[j].enemies[keys[k]].name);
          }
        }
      }
    });
    
  }
});

＆＃13;

<button id="thatBtn">click here</button>
<ul id="display">
</ul>

＆＃13;

Answer 3

将敌人添加为数组，无需使用＆＃34;命名键＆＃34;在一个对象

＆＃13;

function area(name, enemies){
    this.name = name;
    this.enemies = enemies;
}

function enemy(name, type){
    this.name = name;
    this.type = type;
}

var cave = new area ("Cave", [
    new enemy("Bat", "Flying"),
    new enemy("Snake", "Ground"),
]);

var forest = new area ("Forest",[ 
    new enemy("Bear", "Animal"),
    new enemy("Coyote", "Wolf"),
]);
areas = [];
areas.push(cave, forest);

var thatBtn = document.getElementById('thatBtn'),
    display = document.getElementById('display');

thatBtn.addEventListener('click', function(){
  for(i=0; i < areas.length; i++){
    var li = document.createElement('li'),
        liBtn = document.createElement('button');
    liBtn.textContent = areas[i].name;
    li.appendChild(liBtn);
    display.appendChild(li);
    
    liBtn.addEventListener('click', function(){
      for(j=0; j < areas.length; j++){
        if (areas[j].name == event.target.textContent){
          alert(areas[j].name);
          
          for(k=0; k < Object.keys(areas[j].enemies).length; k++){
            alert(areas[j].enemies[k].name);
          }
        }
      }
    });
    
  }
});

＆＃13;

<button id="thatBtn">click here</button>
<ul id="display">
</ul>

＆＃13;

Answer 4

您的主要问题在于：

for(k=0; k < Object.keys(areas[j].enemies).length; k++){
  alert(areas[j].enemies[k].name);
}

表达式Object.keys(areas[j].enemies)返回一个对象属性数组，但是您尝试使用 k 而不是属性名称迭代对象。

由于 Object.keys 返回一个数组，您可以使用数组方法，因此将循环更改为：

Object.keys(areas[j].enemies).forEach(function(name) {
  alert(areas[j].enemies[name]);
});

您有一个次要问题，即您没有声明循环中使用的计数器（ i ， j 和 k ），因此它们变为代码运行时的全局变量。将它们声明为：

for (var i=0; i < areas.length; i++) {

原型对象和对象数组

4 个答案: