jQuery组合函数

jQuery Combine Functions

本文关键字：函数 组合 jQuery      更新时间：2023-09-26

我有两个类似的函数，我想将它们组合起来，这样我就可以在整个站点的任何地方使用它们。这是一个简单的jquery slideUp/slideDown效果，它发现div类'hidden'和点击，它显示和隐藏

$('.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'吗?

看起来处理程序的区别只在于它们作为选择器使用的类。最简单的方法是编写一个函数，根据类名生成一个click处理程序。试试下面的

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

当然。你想写一个插件。关于制作jQuery插件的教程有很多，但官方文档提供了一个良好的开端。

相关文章：