Javascript jQuery组合函数

我有两个类似的功能，我想结合起来，以便我可以使用整个网站的任何地方。这是一个简单的jquery slideUp/slideDown效果，可以找到类为“hidden”的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”吗？

绝对可以。你想写一个插件。关于制作jQuery插件的教程有很多，但是这本书提供了一个良好的开端。

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

看起来处理程序的不同之处在于它们用作选择器的类不同。最简单的方法是编写一个函数，根据类名生成一个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'));

---

看起来处理程序的不同之处在于它们用作选择器的类的不同。最简单的方法是编写一个函数，根据类名生成一个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'));

---

这是评论，不是回答。你听起来像是在说，“我们不会帮你的，RTFM”，并期望为此获得分数。问题是“我可以创建一个函数并放入我自己的‘clickerX’和‘hiddenX’？”使用jQuery的正确方法是编写一个插件。这怎么不是答案呢？我应该为他写密码吗？我必须同意克雷格的观点。虽然示例很好，但他确实回答了用户的问题。他还提供了一个到文档的链接，让这个家伙开始工作。这怎么不是答案？有时，冗余代码示例没有产品文档那么有用。在这里我可以添加大量的例子。答案应该是建设性的，应该显示出一些创造性的努力，应该显示出理解问题的实际尝试。克雷格的回答没有做任何事情。更重要的是，他的语气（对我来说）显得无益和轻蔑。然而，他显然没有这样回答的习惯，对此我表示赞赏。这是一种评论，而不是回答。你听起来像是在说，“我们不会帮你的，RTFM”，并期望为此获得分数。问题是“我可以创建一个函数并放入我自己的‘clickerX’和‘hiddenX’？”使用jQuery的正确方法是编写一个插件。这怎么不是答案呢？我应该为他写密码吗？我必须同意克雷格的观点。虽然示例很好，但他确实回答了用户的问题。他还提供了一个到文档的链接，让这个家伙开始工作。这怎么不是答案？有时，冗余代码示例没有产品文档那么有用。在这里我可以添加大量的例子。答案应该是建设性的，应该显示出一些创造性的努力，应该显示出理解问题的实际尝试。克雷格的回答没有做任何事情。更重要的是，他的语气（对我来说）显得无益和轻蔑。但是，他显然没有这种回答的习惯，对此我很感激。你想过使用jQuery切换吗？你想过使用jQuery切换吗