Question

您好我尝试使用For循环和带有几个不同变量的对象生成一些HTML代码。我之前没有使用普通的JS做过这件事，我也不知道该怎么做。有人可以向我解释一下吗？

到目前为止，我尝试了几件不同的事情 episodes[e(name)];, episodes[e.name];, episodes.name[e];

＆＃13;

document.addEventListener("DOMContentLoaded", theDOMHasLoaded, false);

var episodes = [{
  name: "Episode 1",
  date: "9/12/16",
  id: "episode1",
  description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex voluptate repellat laborum dolores quisquam eos accusamus? Ipsa praesentium aspernatur numquam deleniti eveniet, consequatur laborum nesciunt vel aperiam. Fuga, maxime, magni."
}, {
  name: "Episode 2",
  date: "9/12/16",
  id: "episode2",
  description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex voluptate repellat laborum dolores quisquam eos accusamus? Ipsa praesentium aspernatur numquam deleniti eveniet, consequatur laborum nesciunt vel aperiam. Fuga, maxime, magni."
}, {
  name: "Episode 3",
  date: "9/12/16",
  id: "episode3",
  description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex voluptate repellat laborum dolores quisquam eos accusamus? Ipsa praesentium aspernatur numquam deleniti eveniet, consequatur laborum nesciunt vel aperiam. Fuga, maxime, magni."
}];

function createAudioPlayers() {
  for (e in episodes) {
    var playerString = "<div class=\"podcast-container\">"episodes[e(name)];"</div>";
    $("#audio-players").append(playerString);
  }
}

function theDOMHasLoaded(e) {
  createAudioPlayers();
}

＆＃13;

<div id="audio-players"></div>

＆＃13;

Answer 1

有些事情跳出来了：

不要使用for-in循环遍历数组（没有安全措施）。这不是它的用途。 This answer （也是我）概述了您的各种选项。
episodes[e(name)]不是您访问对象上name属性的方式（由于上面的＃1，e不是对象，它将是一个字符串）。

在字符串旁边放置标识符不会进行字符串连接（不会将其值添加到字符串中），;用于终止语句：

var playerString = "<div class=\"podcast-container\">"episodes[e(name)];"</div>";
// --------------------------------------------------^-----------------^

例如，以下是您在ES5及更早版本中实现createAudioPlayers的方法：

function createAudioPlayers() {
  episodes.forEach(function(episode) {
    var playerString = "<div class=\"podcast-container\">" + episode.name + "</div>";
    $("#audio-players").append(playerString);
  });
}

直播示例：

document.addEventListener("DOMContentLoaded", theDOMHasLoaded, false);

var episodes = [{
  name: "Episode 1",
  date: "9/12/16",
  id: "episode1",
  src: "http://traffic.libsyn.com/preview/securitybydesign/SecurityByDesignEpisode1.mp3",
  description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex voluptate repellat laborum dolores quisquam eos accusamus? Ipsa praesentium aspernatur numquam deleniti eveniet, consequatur laborum nesciunt vel aperiam. Fuga, maxime, magni."
}, {
  name: "Episode 2",
  date: "9/12/16",
  id: "episode2",
  src: "http://traffic.libsyn.com/preview/securitybydesign/SecurityByDesignEpisode2.mp3",
  description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex voluptate repellat laborum dolores quisquam eos accusamus? Ipsa praesentium aspernatur numquam deleniti eveniet, consequatur laborum nesciunt vel aperiam. Fuga, maxime, magni."
}, {
  name: "Episode 3",
  date: "9/12/16",
  id: "episode3",
  src: "http://traffic.libsyn.com/preview/securitybydesign/SecurityByDesignEpisode3.mp3",
  description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex voluptate repellat laborum dolores quisquam eos accusamus? Ipsa praesentium aspernatur numquam deleniti eveniet, consequatur laborum nesciunt vel aperiam. Fuga, maxime, magni."
}];

function createAudioPlayers() {
  episodes.forEach(function(episode) {
    var playerString = "<div class=\"podcast-container\">" + episode.name + "</div>";
    $("#audio-players").append(playerString);
  });
}

function theDOMHasLoaded(e) {
  createAudioPlayers();
}

<div id="audio-players"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如果您愿意，还可以合并所有div个字符串，然后使用append然后使用Array#map来使用Array#join次调用：

function createAudioPlayers() {
  $("#audio-players").append(episodes.map(function(episode) {
    return "<div class=\"podcast-container\">" + episode.name + "</div>";
  }).join(""));
}

Answer 2

您只需要e.name（因为您已经拥有e作为每个剧集对象），并确保将您的引号更改为不同（标记中的单引号），所以它最终会成为

function createAudioPlayers() {
  for (e in episodes) {
    var playerString = "<div class=\'podcast-container\'>" + e.name+ "</div>";
    $("#audio-players").append(playerString);
  }
}

生成的JS对象无法正常工作

2 个答案: