ホームページの更新・管理を行っているとjQueryが無駄に長くなってる場合があります。
原因は、公開当時に無かった項目が更新で追加になった等。今回はそんな無駄に長くしてしまったjQueryをスッキリとさせて見ます。
メタボな例
以下、jQueryを使っているのに無駄に長いサンプルコードです。
jQuery(function($){
$('#leftmenu ul').hide();
//navi1
$('h3#navi1').click(function () {
if ($(this).hasClass('navhit')) {
$(this).removeClass('navhit');
$('#leftmenu ul').hide();
} else {
$('#leftmenu h3').removeClass('navhit');
$(this).addClass('navhit');
$('#leftmenu ul').hide();
$('ul#pulldown1').show();
}
});
// navi2
$('h3#navi2').click(function () {
navi2の処理
});
// navi3
$('h3#navi3').click(function () {
navi3の処理
});
});
5行～15行で1セット。変更箇所は5行目と13行目のCSSクラス名を変更するだけでしたのでメニューの追加ごとに増やした結果。気付けばメタボになっていました。
メタボの修正をしてみる
閲覧者の方から見れば、如何でも好い所ですが、更新管理は少しでも楽をしたいので以下のように修正。
jQuery(function($){
$('#leftmenu ul').hide();
$('#leftmenu h3').click(function () {
if ($(this).hasClass("navhit")) {
$(this).removeClass("navhit");
$('#leftmenu ul').hide();
} else {
$('#leftmenu h3').removeClass("navhit");
$(this).addClass("navhit");
$('#leftmenu ul').hide();
$('+ul',this).show();
}
});
});
変更箇所
//修正前5行目
$('h3#navi1').click(function () {
//修正後4行目、特定のh3指定を辞める
$('#leftmenu h3').click(function () {
//-------------------------------------
//修正前13行目
$('ul#pulldown1').show();
// 修正後12行目、'+ul',this でクリックしたh3に隣接する ul を表示
$('+ul',this).show();
// 代替1、これでもOK。
$(this).next().show();
// 代替2、長くなりますがこれでもOK。
var iistno = $('#leftmenu h3').index(this);
var count = iistno+1;
$('#pulldown' + count).show();
ソースはスッキリしたと思います。もっと良い方法があれば教えて下さい。
これで、メニューが増えても減っても変更無しでOKです。
修正前と比べると3分の1のソースで良くなりました。
将来的に変更が予想される事を想定して作っていれば後が楽だったという事ですね。
番外：jQueryを使わない場合（CSS）
CSSだけでも似た事が出来ますね。只、メニューの追加の度にCSSの変更も必要です。