使用 Prototype 和 Scriptaculous 的幻灯片答案

【问题标题】：Slideshow using Prototype and Scriptaculous使用 Prototype 和 Scriptaculous 的幻灯片
【发布时间】：2013-02-09 19:58:45
【问题描述】：

我编写了我的第一个 scriptaculous 脚本来在一些 div 元素之间创建幻灯片：

    var SlideShow = Class.create({
    initialize:function(element, delayStart){
        this.element = element;
        this.delayStart = delayStart;


        this.slides = this.element.childElements();

        this.numberOfSlides = this.slides.size();

        this.numberActiveSlide = 1;

        this.start_slideshow();
    },

    start_slideshow: function() 
    {
        this.switch_slides.delay(this.delayStart);
    },

    switch_slides: function() 
    {
        this.slides[this.numberActiveSlide].fade();

        if (this.numberActiveSlide == this.numberOfSlides) { this.numberActiveSlide = 1; } else { this.numberActiveSlide = this.numberActiveSlide + 1; }

        Effect.Appear.delay(this.slides[this.numberActiveSlide], 850);

        this.switch_slides.delay(this.delay + 850);
    }


});

document.observe("dom:loaded", function(){
var slideshows = $$('div.slideshow');
slideshows.each(
    function(slideshow) {
        s = new SlideShow(slideshow, 2);
    });
});

但我总是收到此错误，并且已经好几个小时我无法弄清楚我的问题出在哪里！

Undefined 不是对象（评估 this.slides[this.numberActiveSlide]）；

谢谢！

尼克

【问题讨论】：

该错误是指对象实例和该对象的slides 属性。 slides 属性正在查找所有子元素，可能没有 - 您可以编辑您的问题并发布您的 HTML 吗？

标签： prototypejs slideshow scriptaculous

【解决方案1】：

99% 确定这是上下文问题。确保 bind 调用函数，以便在整个代码中保留 this。

调试this 在switch_slides 中的内容：它应该与start_slideshow 中的this 相同。如果不是，请将您对 switch_slides 的调用绑定到您的实例：

start_slideshow: function() 
{
    this.switch_slides.bind(this).delay(this.delayStart);
},

您可能必须在 switch_slides 中执行相同的操作，它会调用自己。

【讨论】：