Reputation: 3756
So I am creating a fading gallery and am a bit of a noob to javascript (but not to programming). I have no idea what is wrong though. Here's the function in question:
/*
*/
function show_next ()
{
// Hide current
$('.s_gallery_images li.s_current').fadeTo(200, .2);
$('.s_gallery_images li.s_current').css("border","1px green solid");
//
if ($('.s_gallery_images li').hasClass ('.s_current'))
{
console.log ('Incrementing existing');
// Class already exists
$('.s_current:first').removeClass('s_current').next().addClass('s_current');
// Was that the last one?
if ($('.s_gallery_images li').hasClass ('.s_current'))
{
console.log ('Current found');
}
else
{
// Class doesn't exist - add to first
$('.s_gallery_images li:first').addClass ('.s_current');
console.log ('Wrapping');
}
}
else
{
console.log ('Adding new class');
// Class doesn't exist - add to first
$('.s_gallery_images li:first').addClass ('.s_current');
}
// Show new marked item
$('.s_gallery_images li.s_current').fadeTo(200, .8);
}
The HTML is a very simple:
<ul class="s_gallery_images">
<li><img src="imagename" alt="alt" /></li>
<li><img src="imagename" alt="alt" /></li>
<li><img src="imagename" alt="alt" /></li>
</ul>
And it displays the list and the images fine. I am using firebugs console.log for debugging, plus have a class set for s_current (bright border) but nothing happens at all.
The firebug console log says:
Adding New Class
Incrementing Existing
Current Found
Incrementing Existing
Current Found
Incrementing Existing
Current Found
Incrementing Existing
Current Found
... to infinity
The function is called on a setInterval timer, and as far as I can tell it should be working (and I have done something similar before), but it just isn't happening :(
Upvotes: 0
Views: 60
Reputation: 630637
In your code, you have some extra dots flying around:
.hasClass ('.s_current')
hasClass
just needs the class name, no dot like this: .hasClass('s_current')
Same for addClass
: .addClass('.s_current')
should be .addClass('s_current')
Overall you could shorten the logic a bit as well:
function show_next ()
{
$('.s_gallery_images li.s_current').css("border","1px green solid")
.fadeTo(200, .2);
if ($('.s_gallery_images li.s_current').length)
$('.s_current').removeClass('s_current').next().addClass('s_current');
if(!$('.s_gallery_images li.s_current').length)
$('.s_gallery_images li:first').addClass('s_current');
$('.s_gallery_images li.s_current').fadeTo(200, .8);
}
Upvotes: 1
Reputation: 54625
You have a few .
points too much in a few function calls. The .classname
syntax is only used for selector syntax, but not when checking/adding/removing class with hasClass/addClass/removeClass
hasClass ('.s_current')
↯
hasClass ('s_current')
✔
addClass ('.s_current')
↯
addClass ('s_current')
✔
Upvotes: 1