Javascript .innerHTML 仅影响父 div

Question

我的代码应该创建一个新游戏，您可以自定义您的学生等等。这不是问题，但是当您加载游戏或完成自定义后，会出现错误。无论出于何种原因，我的图像在 Chrome 上都无法加载。它甚至也不会编辑我想要更改的元素。这是应该有效的更新/运行代码:

function startUp() {
  if (saving) {
    $('#newGame-settings').fadeOut(500);
    setTimeout(function() {
      $("#mainScreen").fadeIn(1500);
    }, 500);
    saving = false;
  } else {
    $('#Start_Menu_Container').fadeOut(500);
    setTimeout(function() {
      $("#mainScreen").fadeIn(1500);
    }, 500);
  }


  var container = "";
  for (var i = 0; i < students.length; i++) {
    container += ("<div class='studentListC' style='background-image: url(\"" + students[i].imgSrc + "\")'>" + students[i].name + "</div>");
  }
  var studentList = document.getElementById("studentList");
  studentList.innerHTML = container;
}

它应该只显示主屏幕(确实如此)，然后编辑 studentList id 元素。但它不。如果有人能帮助我那就太好了!

另外，可能知道的一些有用的事情是，如果我这样做，它会添加到 mainScreen id (studentList 的父元素)中，它会起作用，但图片仍然不显示。所以我的样式中的字符串也可能有错误。

所有代码的链接: http://jsbin.com/joneyi/edit?html,css,js,output

Answer 1

关于它没有填充studentList元素的问题，它实际上是填充一个studentList元素，只是不是你想要的(页面上仍然有一个隐藏的div叫做studentList。我相信您只需要确保选择 mainPage 元素下的 StudentList 元素即可。(请原谅我没有提供执行此操作的代码，我对 javascript 语法很生疏。)

就图像而言，我认为问题在于嵌套双引号:

<div class="studentListC" style="background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQy51udfhp-M17O5xe9wdQNpzq-Rf34cLMcCZ9hqkOIF2PEyKKa")">Brayton</div>

我看到您的代码实际上对整个样式属性使用单引号，但我认为它们可能会在某个地方转换为双引号(可能是隐式转换？)无论如何尝试使用单引号来括住 url 值。