简化 Javascript 对象函数

Question

我有以下 javascript 对象：

Quotes = {
    quote: '#home-quotes .quote',
    quoteWrap: '#home-quotes .quote-wrap',
    leftTrigger: '#home-quotes .quote-left',
    rightTrigger: '#home-quotes .quote-right',
    sliderDot: '#home-quotes .slider-dots li',
    init: function() {
        $(this.rightTrigger).click(this.quoteRight.bind(this));
        $(this.leftTrigger).click(this.quoteLeft.bind(this));
        $(this.sliderDot).click(this.sliderDots.bind(this));
    },
    quoteRight: function(e) {
        var firstQuote = $(this.quote).first(),
            lastQuote = $(this.quote).last(),
            activeQuote = $('.quote.active'),
            nextUp = activeQuote.next();
            quoteWidth = $(this.quote).width();
            moveLeft = -(quoteWidth*2);
        // replaceLeft = -(quoteWidth);
        if ( $(window).width() > 977 ) {
            var updateLeft = '-978px';
        } else {
            var updateLeft = '-100vw';
        }
        e.preventDefault();
        $(this.quoteWrap).removeClass('no-transition');
        $(this.quoteWrap).css('left', moveLeft);
        setTimeout(function(){
            firstQuote.clone().insertAfter(lastQuote);
            firstQuote.remove();
            $('.quote-wrap').addClass('no-transition');
            $('#home-quotes .quote-wrap').css('left', updateLeft);
        }, 500)
        activeQuote.removeClass('active');
        nextUp.addClass('active');
    },
    quoteLeft: function(e) {
        var firstQuote = $(this.quote).first(),
            lastQuote = $(this.quote).last(),
            activeQuote = $('.quote.active'),
            nextUp = activeQuote.prev();
            quoteWidth = $(this.quote).width();
            moveRight = 0;
        if ( $(window).width() > 977 ) {
            var updateLeft = '-978px';
        } else {
            var updateLeft = '-100vw';
        }
        e.preventDefault();
        $(this.quoteWrap).removeClass('no-transition');
        $(this.quoteWrap).css('left', moveRight);
        setTimeout(function(){
            lastQuote.clone().insertBefore(firstQuote);
            lastQuote.remove();
            $('.quote-wrap').addClass('no-transition');
            $('#home-quotes .quote-wrap').css('left', updateLeft);
        }, 500)
        activeQuote.removeClass('active');
        nextUp.addClass('active');
    },
}

我想将“quoteRight”和“quoteLeft”函数简化为一个“moveQuote”函数，并带有两个函数差异的参数。我尝试过创建一个函数，例如：

moveQuote: function(direction, distance, sequence) {
    var firstQuote = $(this.quote).first(),
        lastQuote = $(this.quote).last(),
        activeQuote = $('.quote.active'),
        nextUp = activeQuote.sequence();
        quoteWidth = $(this.quote).width();
        movedistance = -(distance*2);
    if ( $(window).width() > 977 ) {
        var updateLeft = -(distance);
    } else {
        var updateLeft = '-100vw';
    }
    e.preventDefault();
    $(this.quoteWrap).removeClass('no-transition');
    $(this.quoteWrap).css(direction, moveLeft);
    setTimeout(function(){
        firstQuote.clone().insertAfter(lastQuote);
        firstQuote.remove();
        $('.quote-wrap').addClass('no-transition');
        $('#home-quotes .quote-wrap').css('left', updateLeft);
    }, 500)
    activeQuote.removeClass('active');
    nextUp.addClass('active');
}

然后在我的“init”函数中，传递如下参数：

$(this.rightTrigger).click(this.moveQuote('Right', '978px', 'next'));

我的第一个主要问题是我的 'init' 'click' 函数在 onLoad 上运行，而不是在单击 'rightTrigger' 时运行。这是为什么呢？

其次，我不知道如何将参数作为 jQuery 方法传递。例如，上例中的第三个参数 ('next') 应该传递到 jQuery 函数 'activeQuote.next()' 但我不能将参数作为 'activeQuote.sequence()' 传递，因为控制台返回 'activeQuote。序列不是函数'。如何将参数字符串作为 jQuery 方法传递？

对此的任何帮助都非常感谢。我刚刚进入面向对象的 javascript，并希望能得到一些关于我做错的事情的指示。

Answer 1

对于您的第一个问题，您将moveQuote 的执行结果传递给对.click 的调用。您需要传递一个可调用（函数）：

var this_ref = this;
$(this.rightTrigger).click(function () {
    this_ref.moveQuote('Right', '978px', 'next');
});

对于另一个问题，您需要使用方括号表示法来引用具有动态数据的属性/方法：

nextUp = activeQuote[sequence](); //sanity checking for existence is up to you