[英]What's wrong with this jQuery fading gallery code?
So I am creating a fading gallery and am a bit of a noob to javascript (but not to programming). 所以我正在创建一个褪色的画廊,并且对javascript有点不了解(但不喜欢编程)。 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: HTML非常简单:
<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. 我正在使用firebugs console.log进行调试,并且为s_current(明亮的边框)设置了一个类,但是什么也没有发生。
The firebug console log says: Firebug控制台日志显示:
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 :( 该函数在setInterval计时器上调用,据我所知它应该可以工作(并且我之前做过类似的事情),但是它只是没有发生:(
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
.classname
语法仅用于选择器语法,而在使用hasClass/addClass/removeClass
检查/添加/删除类时不使用
hasClass ('.s_current')
↯ hasClass ('.s_current')
↯
hasClass ('s_current')
✔ hasClass ('s_current')
✔
addClass ('.s_current')
↯ addClass ('.s_current')
↯
addClass ('s_current')
✔ addClass ('s_current')
✔
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')
hasClass
只需要类名,没有这样的点: .hasClass('s_current')
Same for addClass
: .addClass('.s_current')
should be .addClass('s_current')
与addClass
相同: .addClass('.s_current')
应该为.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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.