【问题标题】:Display images from an array [duplicate]显示数组中的图像[重复]
【发布时间】:2012-04-12 10:46:23
【问题描述】:

我正在尝试显示 javascript 数组中的六个图像。运行下面的代码我没有得到任何结果,它似乎根本不起作用。我不知道我的错在哪里。

这是 javascript 代码:

var backgroundImage = new Array(); 
backgroundImage[0] = "images/colors-wallpaper.jpg";
backgroundImage[1] = "images/florida-birds.jpg";
backgroundImage[2] = "images/focus-on-life.jpg";
backgroundImage[3] = "images/set-into-life.jpg";
backgroundImage[4] = "images/dandelion.jpg";
backgroundImage[5] = "images/flowers.jpg";
backgroundImage[5] = "images/flowers.jpg";

function displayAllImages() {
// Here has to be some error!!! //
 for (i=0;i<backgroundImage.length;i++) {
    document.write("<li><img src='" + backgroundImage[i] + "' width="160" height="120"/><span>" + backgroundImage[i] + "</span></li>");
}
}

这是我的 html 代码:

<html>
<head>
    <script type="text/javaScript" src="changebackground.js"></script>
</head>
<body>

<div id="container">

    <div class="backgoundImage">
    <ul>
        <script>displayAllImages();</script>
    </ul>
    </div>

</div>

</body>
</html>

【问题讨论】:

  • 用萤火虫或类似工具检查
  • 我收到错误 Uncaught ReferenceError: displayAllImages is not defined (anonymous function)!什么原因??
  • @Philipp Braun:因为您在此函数中有语法错误(请参阅我的回答,您应该更改引号,这应该对您有所帮助)。

标签: javascript image


【解决方案1】:

改变

width="160" height="120"

width='160' height='120'

document.write("<li><img src='" + backgroundImage[i] + "' width="160" height="120"/><span>" + backgroundImage[i] + "</span></li>");

你使用了错误的引号

【讨论】:

    【解决方案2】:

    您的最后一个数组项键应该是 6(我认为相同的值是复制/粘贴错误),我强烈建议您不要使用 document.write 来处理此类问题。检查链接以查看我认为您想要实现的目标,但以更简洁的方式完成(使用 jQuery 的演示仅用于 dom 就绪处理)

    http://jsfiddle.net/UnFUB/

    【讨论】:

    • 唯一一个理智到不用document.write的人。
    【解决方案3】:

    你需要转义你的双引号,见下文:

    document.write("<li><img src='" + backgroundImage[i] + "' width=\"160\" height=\"120\"/><span>" + backgroundImage[i] + "</span></li>");
    

    【讨论】:

      【解决方案4】:
      document.write("<li><img src='" + backgroundImage[i] + "' width='160' height='120'/><span>" + backgroundImage[i] + "</span></li>");
      

      您的引号有误。但最好不要使用 document.write Beeter 的方式是在内存中创建一个元素,然后放到这个块中。 jQuery上的样子

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2015-01-01
        • 2011-03-22
        相关资源
        最近更新 更多