javascript - 更改 src 属性后图像不显示

Question

正如标题所说，在我将 src 更改为 rollEvent 函数期间的值后，图像没有改变。当我将 display.src 的值打印到控制台时，它是正确的。但是实际文档并没有更改带有 display_box 类的 img 标签的 src 值。我在这里遗漏了什么吗？

jsfiddle.net/bNL5C/3/

window.onload = function eventsLoad (elem, display) {
    elem = document.getElementsByClassName('images');
    display = document.getElementsByClassName('display_box');
    function rollEvent(e) {
        var sourceURL = this.src;
        console.log(sourceURL);
        display.src = sourceURL;
        console.log(display.src);
    };
    console.log(elem);
    console.log(display);
    for (var i = 0; i < elem.length; i++) {
        elem[i].addEventListener('mouseover', rollEvent, false);
        console.log('Added event listener to ' + elem[i]);
    };
}

Answer 1

getElementsByClassName 返回 NodeList，因此您应该更改 display.src = sourceURL:

function rollEvent(e) {
    var sourceURL = this.src;
    display[0].src = sourceURL; // <--- change here
    console.log(display.src);
};

演示:http://jsfiddle.net/bNL5C/4/

或使用 display = document.querySelector('.display_box'); 代替。