javascript - 图片库损坏为 "slideSwitch is not defined":-(

Question

我刚刚开始学习 Jquery，并且已经完成了一些教程，令人沮丧的是，这是我完成的最基本的教程之一，而且我似乎无法让它工作。

这是我正在遵循的教程:- http://jonraasch.com/blog/a-simple-jquery-slideshow

当我启动页面并在 Chrome 中运行 debug 并在 Firefox 中运行 firebug 时，出现错误:- “ Uncaught ReferenceError :slideSwitch 未定义”

这是我的代码:-

$(document).ready(function(){
   function slideSwitch(){
       var $active = $('#slideshow IMG.active');
       var $next = $active.next();

       $active.addClass('last-active');

       $next.css({opacity: 0.0})
         .addClass('active')
         .animate({opacity:1.0}, 1000, function() {
              $active.removeClass('active last-active');
         });
  }
  $(function (){
      setInterval( "slideSwitch()", 5000 );
  });
});

据我所知，我已经正确定义了 SlideSwitch 函数，并且评论框中的其他人没有遇到此问题。我确信我做错了一些非常简单的事情。

Answer 1

您的 slideSwitch 函数未在全局范围内定义(仅在 .ready() hadler 内)，并且当您传递字符串 到 setInterval() 这就是它所寻找的地方，而是这样做:

$(function(){
   function slideSwitch(){
       var $active = $('#slideshow IMG.active');
       var $next = $active.next();

       $active.addClass('last-active');

       $next.css({opacity: 0.0})
         .addClass('active')
         .animate({opacity:1.0}, 1000, function() {
              $active.removeClass('active last-active');
         });
  }
  setInterval(slideSwitch, 5000 );
});

郑重声明，这仍然有效(在您拥有它的地方，因为它位于父范围内):

$(function (){
  setInterval(slideSwitch, 5000);
});

但是...您已经处于 document.ready 处理程序中，因此这里不需要包装器。