javascript - Uncaught TypeError: Cannot read property 'src' of undefined - Stack Overflow

admin管理员组

文章数量:1428327

I am trying to implement a slide show, I have written following code but it’s not working most probably due to the reason that this line $('#contain').children(); is returning [object Object] instead of a DOM elements over which I can iterate?

Complete code:

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);
}
}

in the 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=".jpg" />
        <span>1Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
    </div>
    <div class="image">
        <img src=".jpg" />
        <span>2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
    </div>
    <div class="image">
        <img src=".gif" />
        <span>3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
    </div>
</article>

and in console i get errors like: 'Uncaught TypeError: Cannot read property 'src' of undefined'

I am trying to implement a slide show, I have written following code but it’s not working most probably due to the reason that this line $('#contain').children(); is returning [object Object] instead of a DOM elements over which I can iterate?

Complete code:

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);
}
}

in the 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./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./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./VFxPGEi.gif" />
        <span>3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
    </div>
</article>

and in console i get errors like: 'Uncaught TypeError: Cannot read property 'src' of undefined'

• javascript
• jquery

Share Improve this question Follow edited Sep 5, 2013 at 9:51 asked Sep 5, 2013 at 9:45 user971741user971741 2

• 1 At the beginning (this line: var slides = $('#contain).children().get();) you forgot to close the ' – Jonas Grumann Commented Sep 5, 2013 at 9:47
• that was typo here, corrected now. – user971741 Commented Sep 5, 2013 at 9:53

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

missing '..which i think is a typo... anwyways problem is here,

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

you don't have an element with id as currentImage and hence you are getting an error saying src property is undefined.

updated

try this

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);
});
}

What you are looking for might be

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

Demo: Fiddle

Replace

var slides = $('#contain).children().get();

With

var slides = $('#contain').children().get();

Here you forgot ' in id selector.

If you want to select child element you need to specify which child element you want to get.

var slides = $('#contain').children('div').get();

Trying specify the child element, instead of simple mentioning children().

本文标签： javascriptUncaught TypeError Cannot read property 39src39 of undefinedStack Overflow