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时，我不能将参数作为'activeQuote.sequence（）'传递。序列不是一个函数'。如何将参数字符串作为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

简化Javascript对象函数

1 个答案: