javascript - クリック時にjQueryがカスタム関数を呼び出す

Question

$(this) が div.content を表すことができるように、h1 がクリックされた後に specialHouse 関数を正しく呼び出す方法 現在、以下は「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();
})

助けてくれてありがとう:)

Answer 1

新しい関数について jQuery に伝える必要があります。

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

返さthisれると、関数は連鎖可能です。

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

Answer 2

あなたが試した方法は、jQuery プラグインでのみ機能します。ただし、次のように関数を呼び出すことができます (コンテキストthisは期待どおりに設定されます)。

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

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();
   });
};