Функции объединения jQuery

Question

У меня есть две аналогичные функции, которые я хотел бы объединить, чтобы я мог использовать их в любом месте сайта.Это простой эффект jquery slideUp / slideDown, который находит div с классом «скрытый» и по щелчку, он отображает и скрывает

$('.clicker1').click(function(){

    // grab the hidden content
    var desc = $(this).parent().find('.hidden');

    // remove toggle class and slide up
    if ($(this).hasClass('toggled')) {
       $(this).removeClass('toggled');
       $(desc).slideUp(400, 'linear');  
    }

    // add toggle class, slide down, and move the page up
    else {
       var loc = this;

      $(desc).slideDown(400, 'linear', function () {
        $.scrollTo($(loc).offset().top - 60, 400);
      });

      $(this).addClass('toggled');
      $('.clicker1').not(this).removeClass('toggled');
      $('.hidden').not(desc).slideUp(400, 'linear');    
    }
  });

$('.clicker2').click(function(){

    // grab the hidden content
    var desc = $(this).parent().find('.hidden2');

    // remove toggle class and slide up
    if ($(this).hasClass('toggled')) {
       $(this).removeClass('toggled');
       $(desc).slideUp(400, 'linear');  
    }

    // add toggle class, slide down, and move the page up
    else {
       var loc = this;

      $(desc).slideDown(400, 'linear', function () {
        $.scrollTo($(loc).offset().top - 60, 400);
      });

      $(this).addClass('toggled');
      $('.clicker2').not(this).removeClass('toggled');
      $('.hidden').not(desc).slideUp(400, 'linear');    
    }
  });

Могу ли я создать одну функцию и вставить свои собственные «clickerX» и «hiddenX '?

Answer 1

Похоже, что обработчики отличаются только классом, который они используют в качестве селекторов.Самый простой подход - написать функцию, которая генерирует обработчик кликов на основе имен классов.Попробуйте следующее

var makeHandler = function(className, hiddenClassName, ) {

  return function() {
    // grab the hidden content
    var desc = $(this).parent().find(hiddenClassName);

    // remove toggle class and slide up
    if ($(this).hasClass('toggled')) {
       $(this).removeClass('toggled');
       $(desc).slideUp(400, 'linear');  
    }

    // add toggle class, slide down, and move the page up
    else {
       var loc = this;

      $(desc).slideDown(400, 'linear', function () {
        $.scrollTo($(loc).offset().top - 60, 400);
      });

      $(this).addClass('toggled');
      $(className).not(this).removeClass('toggled');
      $(hiddenClassName).not(desc).slideUp(400, 'linear');    
  };
};


$('.clicker1').click(makeHandler('.clicker1', '.hidden'));
$('.clicker2').click(makeHandler('.clicker2', '.hidden2'));

Answer 2

Абсолютно. Вы хотите написать плагин. Существует множество учебников по созданию плагина jQuery, но официальные документы 1002 * дают хорошее начало.