0

我有一个轮播对象，带有图像和寻呼机。问题是我无法将 onClick 设置为寻呼机。我显然在这里遗漏了一些东西，但我不知道是什么。

单击寻呼机项目时的错误是：

Uncaught TypeError: Object #<HTMLDivElement> has no method 'scrollCarouselTo'

我设置了我的点击

    carouselDots.on('click',function(){  
        this.scrollCarouselTo(1,5);   // <-- problem lies here, how can i call this method?
    });

和 scrollTo 方法

this.scrollCarouselTo=function(dotIndex, numDots)
    {       
        //H_SCROLL.scrollToElement("#carouselItem"+dotIndex, 300);
        H_SCROLL.scrollToPage(dotIndex, 0 , 300);
        this.highlightCarouselDot(dotIndex, numDots);
    }

最后，在我的 HTML 文件中，我是这样设置的：

var tempCarousel = new Carousel();
tempCarousel.initialize(params,cont,scrollContainer);

我的轮播课程：（我认为相关的部分）

function Carousel() {

var container;
var pager;
var opt;
var thisCarousel;

//render the correct number of dots and highlight the indexed one
this.highlightCarouselDot=function(dotIndex, numDots)
    {       
        var ui_str="";
        console.log("numDots" + numDots);
        for (var i=0;i<numDots;i++)
        {
            if (i==dotIndex)
                ui_str+='<div class="carouselDot selected" id="carouselDot'+i+'"></div>';
            else
                ui_str+='<div class="carouselDot" id="carouselDot'+i+'"></div>';
        }

        console.log(ui_str);
        console.log(pager);
        pager.html(ui_str);

        var carouselDots = $(pager.selector + " .carouselDot");
        var dotSelected = $(pager.selector + " .selected");
        carouselDots.css('background',opt.pagerImage);
        carouselDots.width(opt.pagerSize);
        carouselDots.height(opt.pagerSize);
        carouselDots.on('click',function(){  //replace with touch
            this.scrollCarouselTo(0,5);
        });
        dotSelected.css('background',opt.pagerSelectedImage);

    }

    this.scrollCarouselTo=function(dotIndex, numDots)
    {       
        //H_SCROLL.scrollToElement("#carouselItem"+dotIndex, 300);
        H_SCROLL.scrollToPage(dotIndex, 0 , 300);
        this.highlightCarouselDot(dotIndex, numDots);
    }

}

谢谢！

4

1 回答 1

1

您无法理解代码中范围的变化。是this指您所在的对象，但是当您分配事件处理程序（例如 onclick）时，该函数将在被单击的 UI 元素的范围内运行。这意味着在您的 onclick 代码中，this指的是被点击的 html 对象，而不是highlightCarouselDot对象。

这个问题的一个常见解决方案是使用一个额外的变量来存储 this 的值。

var self = this;

在对象的开头，这样当您想要引用外部对象时，您可以在事件处理程序中引用 self 。

于 2012-11-16T16:40:01.260 回答