Question

我正在构建一个javaScript插件，并在我的插件中定义一个命名空间;但是，网页找不到它。请尽量明确答案;因为我学习更好地检查代码，观看视频，有人在做实时编码和测试。

这是我的HTML：

    ...  
   <article class="slider_cnt">
        <div class="slider">
          <img src="img/slide1.jpg" />
          <img src="img/slide2.jpg" />
          <img src="img/slide3.jpg" />
        </div>
    </article>
  </div>

  <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="js/modernizr-2.6.2.min.js"></script>
  <script type="text/javascript" src="js/elegant2_slider.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            elegantNamespace.initialize($('.slider'),'img');  // options setup
        });
    </script>
</body>

和我的javaScript：

(function ($) {
    this.elegantNamespace = this.elegantNamespace || {};
    var ns = this.elegantNamespace;

    // settings
    var $slider; // class or id of carousel slider
    var $slide; // could also use 'img' if you're not using a li
    var $transition_time = 1000; // 1 second
    var $time_between_slides = 2300; // 2.3 seconds
    var $interval;

    ns.initialize = function(fram, slide){  // options setup
        $slider = fram;
        $slide = slide;
        startloop();
    }

    slides = function() {
        return $slider.find($slide);
    }

    slides().fadeOut();

    // set active classes
    slides().first().addClass('active');
    slides().first().fadeIn($transition_time);

    // auto scroll 
    startloop = function () {
        $interval = setInterval(

        function () {
            var $i = $slider.find($slide + '.active').index();

            slides().eq($i).removeClass('active');
            slides().eq($i).fadeOut($transition_time);

            if (slides().length == $i + 1) $i = -1; // loop to start
            slides().eq($i + 1).addClass('active');
            slides().eq($i + 1).fadeIn($transition_time+ 2000);
        }, $transition_time + $time_between_slides);
    }
    pauseLoop = function() {
        window.clearInterval($interval);
    }

    $slider.hover(

    function () {
        pauseLoop(); // pause the loop
    },

    function () {
        startloop(); //scroll()
    });
})();

Answer 1

浏览器可以很好地识别您的命名空间。你的程序被窃听了。
您创建了变量 $ slider 和 $ slide 您可以使用 initialize 函数为这些变量赋值：

ns.initialize = function(fram, slide){  // options setup
    $slider = fram;
    $slide = slide;
    startloop();
}

这里有一个使用这些变量的函数：

 slides = function() {
    return $slider.find($slide);
}

为了使此功能起作用，必须初始化变量。这意味着您必须在调用滑块功能之前调用初始化功能。

这就是你的问题所在。通过调用滑块功能，您尝试使用尚未初始化的 $ slider 。结果你的脚本中断了：

slides().fadeOut();
slides().first().addClass('active');
slides().first().fadeIn($transition_time);

在您的脚本结束时，您还尝试使用 $ slider ：

$slider.hover(

function () {
    pauseLoop(); // pause the loop
},

function () {
    startloop(); //scroll()
});

要将此代码移动到初始化函数中。这样它应该工作。像这样：

ns.initialize = function(fram, slide){

    $slider = fram;
    $slide = slide;

    slides().fadeOut();
    slides().first().addClass('active');
    slides().first().fadeIn($transition_time);

    $slider.hover(

    function () {
        pauseLoop();
    },

    function () {
        startloop();
    });

    startloop();

}

命名空间未定义

1 个答案: