Question

所以我正在创建一个渐弱的画廊，我有点像javascript（但不是编程）。我不知道有什么问题。这是有问题的功能：

    /*

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

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>

它显示列表和图像正常。我正在使用firebugs console.log进行调试，并且为s_current（明亮边框）设置了一个类，但根本没有任何反应。

firebug控制台日志说：

Adding New Class
Incrementing Existing
Current Found
Incrementing Existing
Current Found
Incrementing Existing
Current Found
Incrementing Existing
Current Found
... to infinity

该函数在setInterval计时器上调用，据我所知它应该正常工作（之前我做过类似的事情），但它没有发生：（

Answer 1

在一些函数调用中，您有几个.点。 .classname语法仅用于选择器语法，但在使用hasClass/addClass/removeClass

检查/添加/删除类时不会

hasClass ('.s_current')↯

hasClass ('s_current')✔

addClass ('.s_current')↯

addClass ('s_current')✔

Answer 2

在你的代码中，你有一些额外的点飞来飞去：

.hasClass ('.s_current')

hasClass只需要类名，不需要这样的点：.hasClass('s_current')

addClass相同：.addClass('.s_current')应为.addClass('s_current')

总的来说，你可以稍微缩短逻辑：

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

这个jQuery淡化库代码有什么问题？

2 个答案: