CODEWITHSUNDEEP
jquery
Adam
Adam

Reputation: 9049

Creating a slider with dots representing each image, each not returning image element?

Javascript:

var images = $('#slideshow').children();

var dot_holder = $('#slider_dots');
/* Create the dots*/

images.each(function(index,item){

    if(item.hasClass('active')){
        dot_holder.append('<img src="Images/dot_solid.png" alt=""/>');
    }else{
        dot_holder.append('<img src="Images/dot_fade.png" alt=""/>');
    }


});

html:

<div id="slideshow">
                    <img src="Images/image_1.jpg" alt="image 1" class="active"/>
                    <img src="Images/image_2.jpg" alt="image 2"/>
                    <img src="Images/image_3.jpg" alt="image 3"/>
                    <img src="Images/image_4.jpg" alt="image 4"/>
                    <img src="Images/image_5.jpg" alt="image 5"/>
                    <img src="Images/image_6.jpg" alt="image 6"/>
                    <img src="Images/image_7.jpg" alt="image 7"/>


                </div>

Essentially, I want the dot to be solid representing the active image, however I get an error saying Uncaught TypeError: Object # has no method 'hasClass'

Upvotes: 0

Views: 1400

Answers (2)

Samich
Samich

Reputation: 30105

item.hasClass('active')

should be:

$(item).hasClass('active')

Because through iteration you have direct reference to the element, and hasClass is function of the jQuery object.

Upvotes: 1

sinsedrix
sinsedrix

Reputation: 4775

Write $(item) instead to get a jquery object.

Upvotes: 2

Related Questions