jQueryの結合機能

Question

2つの同様の機能を組み合わせて、サイト全体のどこでも使用できます。それは「隠れた」クラスで、クリック上のdivを見つける簡単なjQueryのslideUp/slideDown効果だ、それが表示され、

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

は、私は1つの関数を作成することができ隠し、自分自身の「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は良いスタートを与えてくれます。