jqueryはイベントをクラスにバインドするか、または同じ効果に何かをバインドしますか？

Question

イベントをクラスにバインドするか、以下に投稿した冗長コードの代わりにしたいと思います。何か案は？

おかげで、 MNA

 
(function(){ 
    $("button", "body").button(); 
    var submenu=false; 

    $("#about").click(function() { 
    $("#content").fadeOut(1000); 
    $("#content").load('about.html'); 
    $("#content").fadeIn(1000); 
    }); 

    $("#community").click(function() { 
    $("#content").fadeOut(1000); 
    $("#content").load('community.html'); 
    $("#content").fadeIn(1000); 
    }); 

    $("#store").click(function() { 
    $("#content").fadeOut(1000); 
    $("#content").load('store.html'); 
    $("#content").fadeIn(1000); 
    }); 

    $("#projects").click(function() { 
    $("#content").fadeOut(1000); 
    $("#content").load('projects.html'); 
    $("#content").fadeIn(1000); 
    }); 
}); 

Answer 1

どちらかmultiple selector

$("#about, #community, #store, #projects").click(function() { 
    $("#content").fadeOut(1000) 
       .load(this.id + '.html') 
       .fadeIn(1000); 
}); 

を使用するか、またはこれらの要素に同じクラスを与え、使用

$('.classname').click(...); 

更新：

@pointyには良い点がありましたが、彼は答えを削除しました。おそらくfadeOut、load、fadeInが次々と出現したかったでしょう。次にコールバックに入れてください：

$("#content").fadeOut(1000, function() { 
    $(this).load(this.id + '.html', function() { 
     $(this).fadeIn(1000); 
    }) 
}); 

詳細については、ドキュメントを参照してください。

Answer 2

これはいかがですか？

clickイベントをバインドするすべての要素にクラスload-contentを設定します。

(function(){ 
    $("button, body").button(); 
    var submenu=false; 

    $(".load-content").click(function() { 
     $("#content").fadeOut(1000).load(this.id+'.html').fadeIn(1000); 
    }); 
});