尝试使用 for 循环来缩短 js 但出现 "not defined" 错误

Question

我是 javascript 的初学者，我正在努力改进这一点：（已经过测试并且工作正常）

// snail 1  //
var s1 = document.createElement("div");
s1.id = snail1.id;
s1.className = "snail-container";
s1.style.backgroundImage = "url('" + this.snail1.photo+ "')";
s1.style.top = snail1.y + "px";
s1.style.left = snail1.x + "px";
racetrack.appendChild(s1);

// snail 2  //
var s2 = document.createElement("div");
s2.id = snail2.id;
s2.className = "snail-container";
s2.style.backgroundImage = "url('" + this.snail2.foto + "')";
s2.style.top = snail2.y + "px";
s2.style.left = snail2.x + "px";
racetrack.appendChild(s2);

... ... ...

等等...（共4个）

到一个 for 循环，它可以做我需要的很多，但它说：Uncaught ReferenceError: snail is not defined 在 window.onload (race4.js:138) 当我尝试此代码时：

for(var i = 1; i < 5; i++)
    {
    var s1 = document.createElement("div");
    s1.id = snail+i.id;
    s1.className = "snail-container";
    s1.style.backgroundImage = "url('" + this.snail.photo+ "')";
    s1.style.top = snail+i.y + "px";
    s1.style.left = snail+i.x + "px";
    racetrack.appendChild(s1);

    }

那么我做错了什么？

Answer 1

我发现 snail+i.x 有问题，请将其更正为 this["snail"+i].x（这样您就可以访问 snail1、snail2 等），其他地方也类似这样:

for(var i = 1; i < 5; i++)
    {
    var s1 = document.createElement("div");
    s1.id = this["snail"+i].id;
    s1.className = "snail-container";
    s1.style.backgroundImage = "url('" + this.snail.photo+ "')";
    s1.style.top = this["snail"+i].y + "px";
    s1.style.left = this["snail"+i].x + "px";
    racetrack.appendChild(s1);

    }

Answer 2

您应该使用 array 或 object literal 来保存您的蜗牛列表并存储它们的属性，然后遍历它来创建这些元素。

这是您可以解决此问题的一种方法：

var racetrack = document.getElementById("racetrack");

// create a "map" of all snails and their properties
var snails = {
  "1": {
    id: 1,
    photo:
      "https://image.shutterstock.com/image-vector/vector-illustration-snail-cartoon-260nw-187683554.jpg",
    y: 10,
    x: 10
  },
  "2": {
    id: 2,
    photo:
      "https://image.shutterstock.com/image-vector/vector-illustration-snail-cartoon-260nw-187683554.jpg",
    y: 20,
    x: 20
  },
  "3": {
    id: 3,
    photo:
      "https://image.shutterstock.com/image-vector/vector-illustration-snail-cartoon-260nw-187683554.jpg",
    y: 30,
    x: 30
  },
  "4": {
    id: 4,
    photo:
      "https://image.shutterstock.com/image-vector/vector-illustration-snail-cartoon-260nw-187683554.jpg",
    y: 40,
    x: 40
  }
};

for (var i = 0; i < Object.keys(snails).length; i++) {
  var s = document.createElement("div");
  var snail = snails[i + 1]; // get snail's properties from the "map"

  s.id = snail.id;
  s.className = "snail-container";
  s.style.backgroundImage = "url('" + snail.photo + "')";
  s.style.top = snail.y + "px";
  s.style.left = snail.x + "px";

  racetrack.appendChild(s);
}

.snail-container {
  width: 130px;
  height: 95px;
  background-size: cover;
  margin-bottom: 15px;
}

<div id="racetrack"></div>

尝试使用 for 循环来缩短 js 但出现 "not defined" 错误

Trying to use for loop to shorten js but getting "not defined" error

javascript

for-loop

undefined