jQuery点击调用自定义函数

Question

如何在h1被点击后正确调用specialHouse函数，使$(this)仍然代表div.content？当前下面的代码无法运行，会出现错误"Uncaught TypeError: Object [object Object] has no method 'specialHouse'"

function specialHouse()
{
    $(this).slideDown(500, function(){
      $(this).delay(2000).slideUp();
    });
 };

$('div.content').hide();
$('h1').on('click', function(){
    $(this).next('div.content').specialHouse();
})

感谢任何帮助 :)

- Ben_hawk

Answer 1

您需要告诉jQuery关于您的新功能：

jQuery.fn.specialHouse = function() {
   return this.slideDown(500, function(){
     $(this).delay(2000).slideUp();
   }
}

当我们返回this时，我们的函数可以链接调用：

$("a").specialHouse().text("Hello World");

- jantimon

---

为什么我们必须返回'this'才能使函数可链接呢？:S - Ben_hawk

这就是每个可链式调用的jQuery插件的工作原理。this被返回，下一个函数可以再次使用它。 - jantimon

就我个人而言，我认为另一个答案更好。它可以在不修改原始函数的情况下工作，因此允许该函数继续作为独立的事件处理程序使用。 - Alnitak

Answer 2

您尝试的方法仅适用于jQuery插件。但是，您可以像这样调用函数（上下文this将按预期设置）：

$('h1').on('click', function() {
    $(this).next('div.content').each(specialHouse);
});

- Niko

---

好的方法是在不将该函数转换为插件的情况下完成它。 - Alnitak

Answer 3

请尝试：

$('div.content').hide();
$('h1').on('click', function(){
    specialHouse($(this).next('div.content'));
}) 

function specialHouse(elem){
  $(elem).slideDown(500, function(){
     $(this).delay(2000).slideUp();
   });
};

- mgraph

---

OP 特别要求 $(this) - 而不是一个参数。 - Alnitak