Пытаюсь использовать вместо l oop для сокращения js, но получаю ошибку "не определено" - PullRequest
Новая
       84

Пытаюсь использовать вместо l oop для сокращения js, но получаю ошибку "не определено"

1 голос
/ 18 июня 2020

Я новичок в 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)

для l oop, который может делать столько, сколько мне нужно, но он говорит: Uncaught ReferenceError: snail is not defined at 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);

    }

Итак, что я здесь делаю не так?

Ответы [ 2 ]

0 голосов
/ 18 июня 2020

Вы должны использовать array или object literal, чтобы вести список ваших улиток и сохранять их свойства, а затем перебирать его, чтобы создать эти элементы.

Вот один из способов go об этом: 

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>
0 голосов
/ 18 июня 2020

Я вижу проблему с snail+i.x, исправьте ее на this["snail"+i].x (чтобы вы могли получить доступ к snail1, snail2 et c) и аналогично для других везде, например: 

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);

    }
...