Javascript .innerHTML仅影响父div

时间:2015-10-28 22:11:25

标签: javascript jquery html css

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

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

1 个答案:

答案 0 :(得分:0)

关于它没有填充studentList元素的问题,它实际上是填充一个 studentList元素,而不是你想要的那个元素(页面上仍有一个名为studentList的隐藏div。我相信你只需要确保你在mainPage元素下选择了studentList元素。(原谅我没有提供代码来做到这一点,我的javascript语法却很生气。)

就图像而言,我认为问题是嵌套的双引号:

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

我看到你的代码实际上是使用整个样式属性的单引号,但我认为它们可能会在某处转换为双引号(可能是隐式转换?)无论如何,请尝试使用单引号括起url值。