Question

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

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

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

我设置了我的onclick

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

我的Carousel课程:(我认为相关的部分内容）

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

}

谢谢！

Answer 1

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

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

var self = this;

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

在对象内设置onCLick回调？

1 个答案: