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插件的教程，但是official docs提供了一个良好的开端。

jQuery组合函数

2 个答案: