javascript - 使用 javascript 动态添加图片。

Question

我一直在开发一个流程图类型的程序，每次提出新问题时都会更改 html 的各个部分(该问题由下面的“状态”变量表示)，例如标题、描述和图像。

目前，我的图像 HTML 是:

<a id="imageLink" target="_blank" href=""><img class= 'right' id= 'imageBox' style ='max-height:50%;' src='' /></a>
<h3 id ='imageBoxText' ></h3>

图像链接和图像图例位于 imageArray 中，如下所示:

imageArray = {'questionOne': ['www.link to image.com,'Legend for image']}

在这种情况下，“questionOne”将是“state”。

到目前为止，我可以使用异步加载单个图像:

document.getElementById("imageBox").src = "http://www.ktcagency.com/img/loader.gif"; // load spinner

var img = new Image(); // load image asynchronously
var newsrc = imageArray[state][0];
img.onload = function () { // onload handler
    document.getElementById("imageBox").src = newsrc;
};
img.src = newsrc;

我还添加了图像的描述和链接:

document.getElementById("imageLink").setAttribute('href',imageArray[state][0])
document.getElementById('imageBoxText').innerHTML = imageArray[state][1];

好的，现在我需要做的是编写一个函数，可以对多个图像并排执行此操作，从修改后的 imageArray 中读取，如下所示:

imageArray = {'questionOne': [['www.linktoimage1.com,'Legend for image1'],['www.linktoimage2.com,'Legend for image2']]}    

代码应该能够处理最多三个图像，但我当然不会介意它是否可以处理更多。

我尝试使用表格来表示图像，并使用 for 循环和之前的代码。图像永远不会加载，永远卡在旋转器上，并且图像会全部聚集在屏幕的一侧。

感谢任何帮助，非常感谢。

Answer 1

好吧，我想我明白你想做什么。

听起来您正在尝试制作某种幻灯片。

这是我如何做到这一点的一个例子。

这是 jsfiddle，这样你就可以看到发生了什么。 http://jsfiddle.net/VodkaTonic/4KWLr/

(function () {

var imageArray = {
    link: [['http://i.imgur.com/7OfqRbF.jpg', 'http://i.imgur.com/AHbc6zO.jpg','http://i.imgur.com/gW144OQ.jpg'],['http://i.imgur.com/v0V8hrB.jpg', 'http://i.imgur.com/9l40vIT.png','http://i.imgur.com/ZXYUttz.png']],
    label: [['Legend for image1','Legend for image2', 'Legend for image3'],['Legend for image4','Legend for image5', 'Legend for image6']]
},
    doc = document,
    question = 0,
    img = doc.getElementsByClassName('images'),
    links = doc.getElementsByClassName('links'),
    label = doc.getElementsByClassName('label'),
    button = doc.getElementById('button');


function add (state) {
        var arr = imageArray.link[state],
            arr2 = imageArray.label[state];
        arr.forEach(function(value,index,array) {
            img[index]['src'] = value;
            links[index]['href'] = value;
        });
        arr2.forEach(function(value,index,array) {
            label[index]['innerHTML'] = value;
        });
    question++;
}

window.addEventListener('load', add(question), false);
button.addEventListener('click', function () {
    add(question);
}, false)
}());