Annoying jQuery Issue

[Roxon]

I am creating a custom jQuery slideshow with dynamically generated pagination. There is a #slides div containing all the images. When the page is loaded, the following is ran:

$("#slides img").each(function(index) {

$(this).attr("id", index); // Image class = index (0, 1, 2 etc)

slideCount++;

// Generate Pagination and CSS

if (index != 0) {

$("#pagination").append("");

$(this).css("display", "none");

} else {

$("#pagination").append("");

}

});

So, a generated pagination item looks like this:

When you click an arrow to navigate through slides, jQuery throws an exception when this code is ran:

("#p" + currentSlide).attr("src", "img/dot-empty.png");

The error generated says “Object #p1 has no method ‘attr’.” (#p1 is just an example, it could be #p5 or #p300). I can’t for the life of me understand why. The incredibly frustrating aspect is that when I type the command into the console, it runs perfectly. I just can’t run it through the script.

[Mottie]

It is just a typo, or is that really missing a “$”?

$("#p" + currentSlide).attr("src", "img/dot-empty.png");

If that was just a typo, then add a check to make sure the element exists, like this:

var p = $("#p" + currentSlide);

if (p.length){

p.attr("src", "img/dot-empty.png");

}

[Author]

Posts