jQuery morphing button concept

Question

Я написал несколько jQuery, которые будут морфировать кнопку в контейнер при нажатии. Теперь я хочу использовать тот же скрипт, но на другой кнопке. Я не уверен, что это лучший способ сделать это. Будет ли это копирование и вставка всего morphObject, а затем изменение битов, которые нужно изменить для новой кнопки, а затем запустить обе функции инициализации объекта?

Вот Fiddle: https://jsfiddle.net/2a3rp590/

Вот JQuery:

$(document).ready(function() { 

    var morphObject = { 

     button: $('button.morphButton'), 
     container: $('div.morphContainer'), 
     overlay: $('div.overlay'), 
     content: $('h1.content, p.content'), 

     endPosition: { 
      top: 100, 
      left: '50%', 
      width: 600, 
      height: 400, 
      marginLeft: -300 
     }, 


     init: function() { 
      var mO = morphObject, 
       button = mO.button; 

      button.on('click', function() { 
       button.fadeOut(200); 
       setTimeout(mO.containerMove, 200); 
      }); 

     }, 

     containerMove: function() { 
      var mO = morphObject, 
       content = mO.content, 
       overlay = mO.overlay, 
       container = mO.container, 
       span = $('span.close'); 

      overlay.fadeIn(); 

      container.animate(mO.endPosition, 400, function() { 
        content.fadeIn(); 
        span.fadeIn(); 
        mO.close(); 
      }); 

     }, 

     close: function() { 
      var mO = morphObject, 
       container = mO.container, 
       overlay = mO.overlay, 
       content = mO.content; 

      if (container.find('span.close').length) return; 

      $('<span class="close">X</span>').appendTo(container); 

      var span = $('span.close'); 

      overlay.add(span).on('click', function() { 
       content.fadeOut(); 
       span.fadeOut(); 
       overlay.fadeOut(); 
       setTimeout(mO.animateBack, 200); 
      }); 

     }, 

     animateBack: function() { 
      var mO = morphObject, 
       container = mO.container; 
       button = mO.button; 

      container.animate(mO.startPosition, 400, function() { 
        button.fadeIn(300); 
      }); 

     } 

    } 

    var container = morphObject.container; 

    morphObject.startPosition = { 
     top: container.css('top'), 
     left: container.css('left'), 
     width: container.css('width'), 
     height: container.css('height'), 
     marginLeft: container.css('margin-left') 
    }; 

    morphObject.init(); 

}); 

Вы можете увидеть в скрипку, я добавил новую кнопку, контейнер и содержимое. Как заставить мой код работать с несколькими кнопками?

Спасибо.

Answer 1

Как я уже сказал в своих комментариях, вы могли бы сделать следующее. Имейте в виду, что это непроверенная версия.

init: function(params) { 
    //object reference 
    var self = this; 
    //reassign the button object if it was passed 
    //else use the default from the object 
    self.button = typeof params !== "undefined" && params.button || self.button; 

    self.button.on('click', function() { 
     $(this).fadeOut(200); 
     setTimeout(self.containerMove, 200); 
    }); 
} 

//I am using an object as you my want to 
//pass in more options later, just in case 
//such as 
/* 
morphObject.init({ 
    button: $('button.morphButton2'), 
    container: $('.another-container') 
}); 
*/ 

morphObject.init({ 
    button: $('button.morphButton2') 
}); 

Или у вас может быть общий класс для всех кнопок, которые будут запускать щелчок внутри метода init. Легко?

var morphObject = { 
    button: $('button.morphButton') //let's say 'morphButton' is the common class 
    ..... 
    ..... 

    init: function(params) { 
     //object reference 
     var self = this;   
     self.button.on('click', function() { 
      $(this).fadeOut(200); 
      setTimeout(self.containerMove, 200); 
     }); 
    } 

    ..... 
    ..... 
    ..... 
}