Simplify Javascript функция объекта

Question

У меня есть следующий JavaScript Object:

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

Мой первый основной вопрос в том, что мой «инициализации» ' 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