3

私の豊富なクリック機能を合理化する方法を知っている人はいますか？

これが私の例です：

$("#info01_v1_btn").click(function(){
    $("#info01_v1").slideToggle("fast");
    $("#info01_v1_btn a").toggleClass("open");
    return false;
});

$("#info02_v1_btn").click(function(){
    $("#info02_v1").slideToggle("fast");
    $("#info02_v1_btn a").toggleClass("open");
    return false;
});

$("#info03_v1_btn").click(function(){
    $("#info03_v1").slideToggle("fast");
    $("#info03_v1_btn a").toggleClass("open");
    return false;
});

$("#info04_v1_btn").click(function(){
    $("#info04_v1").slideToggle("fast");
    $("#info04_v1_btn a").toggleClass("open");
    return false;
});

$("#info05_v1_btn").click(function(){
    $("#info05_v1").slideToggle("fast");
    $("#info05_v1_btn a").toggleClass("open");
    return false;
});

これらの関数が同じページで一緒に呼び出されていない場合は、おそらくIDの代わりにクラスを使用しますが、複数のアドレス情報を格納するモジュールを使用しているため、他の方法がわかりません。記録のために、これはうまくいきますが、本当に混乱しているようです。ループを追加することがそれをクリーンアップするのに役立つかどうかわからない。

注*：私はWebデザイナーであり、jquery'ierを独学で学んでいるため、このコードを他の場所で再利用できる可能性のあるものよりも小さくするための優れた手法を探しています。

ありがとう

4

2 に答える 2

3

で終わるすべての要素にイベントをバインドし_v1_btn、ID を使用して次の要素をターゲットにし、thisキーワードを使用してターゲット<a>にする必要がある要素を見つけます。

$('[id$="_v1_btn"]').on('click', function(){
    var ID = this.id.replace('_btn', '');
    $("#"+ID).slideToggle("fast");
    $('a', this).toggleClass("open");
    return false;
});
于 2012-08-20T19:26:11.093 に答える
1 
$(".YourClassName").click(function(){
    var t = $(this).attr('id').replace('_btn','');
    $( '#' + t ).slideToggle("fast");    
    $(this).find('a').toggleClass("open");
    return false;
});
于 2012-08-20T19:33:59.063 に答える