簡素化JavaScriptオブジェクト機能

Question

私は、次のJavaScriptのオブジェクトがあります。私は2つの機能の違いのためのパラメータを持つ1「moveQuote」関数に「quoteRight」と「quoteLeft」の機能を簡素化したいと思っています

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

を。以下のようにパラメータを渡し、その後、私の関数initの中

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

と：：私のような、単一の関数を作成しようとした

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

私の最初の主要な問題であるという私の「initは」 ' click '関数がonLoadを実行していて、' rightTrigger 'がクリックされていないときは機能しません。どうしてこれなの？

第2に、パラメータをjQueryメソッドとして渡す方法を理解できません。たとえば、上記の例の3番目のパラメータ（ 'next'）は、jquery関数 'activeQuote.next（）'に渡す必要がありますが、 'activeQuote.sequence（）'としてパラメータを渡すことはできません。シーケンスは関数ではありません '。パラメータ文字列をjQueryメソッドとして渡すにはどうすればよいですか？

これに関するお手伝いがあります。私はちょうどオブジェクト指向のjavascriptに移動し、私が間違っていることをいくつかの指針を得ることを望んでいます。

Answer 1

最初の問題では、の実行結果を.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 

クロージャを返し