javascript - 未捕获的类型错误 : Cannot read property 'src' of undefined

Question

我正在尝试实现幻灯片放映，我编写了以下代码，但它不起作用很可能是由于此行 $('#contain').children(); 是返回 [object Object] 而不是我可以迭代的 DOM 元素？

完整代码:

function startSlideShow(interval) {
//var slides = $('#contain').children();
var slides = $('#contain').children().get();
console.log("0: " + slides);
slides.each(function () {
    console.log($(this));
});
for (var i = 0; i < slides.length; i++) {
    setTimeout(
        function () {
            var slide = $(slides[i]).children();
            console.log("1: " + slide);
            $('#currentImage').attr('src', slide[0].src).fadeIn(interval * 100);
            $('#slideDesc').html(slide[1].innerHTML).fadeIn(interval * 100);
        }, interval * 1000);
}
}

在 html 中:

<article id="imageShow">
    <div class="image">
        <img src="" id="currentImage" />
    </div>
    <div id="imageCover"></div>
</article>

<article id="contain">
    <div class="image">
        <img src="http://i.imgur.com/925p6M5.jpg" />
        <span>1Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
    </div>
    <div class="image">
        <img src="http://i.imgur.com/dbBu5rk.jpg" />
        <span>2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
    </div>
    <div class="image">
        <img src="http://i.imgur.com/VFxPGEi.gif" />
        <span>3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
    </div>
</article>

在控制台中我收到如下错误:“未捕获的类型错误:无法读取未定义的属性“src””

Answer 1

缺少'..我认为这是一个拼写错误...无论如何问题就在这里，

  $('#currentImage').attr('src', slide[0].src).fadeIn(interval * 100);

您没有 id 为 currentImage 的元素，因此您会收到一条错误消息，指出 src 属性未定义。

已更新

试试这个

function startSlideShow(interval) {
var slides = $('#contain').children();
slides.each(function (index, value) {
    setTimeout(function () {
        var slide = $(value);
        $('#currentImage').attr('src', slide.find('img').attr('src')).fadeIn(interval * 100);
        $('#slideDesc').html(slide.find('span').html()).fadeIn(interval * 100);
    }, interval * 1000);
});
}