画像を使用したタブを複数設置

質問

下記、サイトを参考にタブ切り替え式のjQueryを設置しました。

http://web.showjin.me/2011/05/jquery_tab_image.html

これを同じファイル内に複数設置したく
同じscriptをjsファイルに3つコピーし
設置しましたが、エラーで動かなくなったので
各、ul.btn_tab li aのtab部分tab01、tab02、tab03とし、
.container_tabをcontainer_tab01～03、
a.selectedをa.selected01～03と
それぞれ変更してみました。

上記の方法で動作は実現できたのですが、
これをもっとスマートなscriptにする方法があればご教授頂けないでしょうか。

どうぞ宜しくお願い致します。

id、classを修正し、以下を3パターン設置しています。

javascript ================

/* クリックしたときに出る点線を防ぐ（IE対策）*/
$(function(){
$("ul.btn_tab li a").focus(function(){
$(this).blur();
});
})

/* タブボタンのon/offとタブの内容を切り替える */
$(function(){

/* 初期設定 */
$("a.selected img").attr("src",$("a.selected img").attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2"));
$(".container_tab div:not("+$("ul.btn_tab li a.selected").attr("href")+")").hide();

/* クリック時の処理 */
$("ul.btn_tab li a").click(function(){

// 今のul.btn_tab li a.selectedのhrefの値を保持しておく
var name1=$("ul.btn_tab li a.selected").attr("href");

$("a.selected img").attr("src",$("a.selected img").attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2"));
$("ul.btn_tab li a").removeClass("selected");
$(this).addClass("selected");

/* クリックした画像はmouseoverで_onが付けられているので、そのままだと_on_onとなり、画像へのパスが通らなくなる。
なので、今付いている_onをいったん削除してから再度_onを付け直す */
$("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2"));

$("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2"));

// 保持しておいたhrefの値のdivの内容がフェードアウトしたら、クリックされたボタンのhrefの値のdivの内容をフェードインする
$(name1).fadeOut(500,function(){

// クリックされたul.btn_tab li a.selectedのhrefの値を保持
var name2=$("ul.btn_tab li a.selected").attr("href");
$(name2).fadeIn(500);
});
return false;
})
})

/* マウスオーバー時の処理 */
$(function(){
$("ul.btn_tab a").mouseover(function(){

/* セレクタがついているかどうかの条件判断はマウスオーバーとマウスアウトのそれぞれに対して設定する。
マウスオーバー時だけだと、クリックした後、マウスアウトするときに_onが外されて通常時の画像になってしまうため */
var className = $(this).attr('class');
if(className!='selected'){
$("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"))
}
}).mouseout(function(){
var className2 = $(this).attr('class');
if(className2!='selected'){
$("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2"))
}
})
})

回答No.1

fujillin · ベストアンサー

回答がないみたいなので…

＞これをもっとスマートなscriptにする方法があればご教授頂けないでしょうか
スマートかどうかはわかりませんが、基本的には共通した処理なので、対象を指定すればその対象に対してタブの処理を設定するようにしてあげればよいのではないでしょうか？
記述方法としては、直接に要素を指定する方法ではなく、その対象要素やイベント発生要素から相対的に要素等を指定する方法になるでしょう。

オリジナルがid利用なので共通のCSSを利用しにくい点などはありますが、とりあえずソースやCSSはそのままとして、こんな考え方ではいかがでしょうか？
（サンプルなので、チェックは省略。細かいところは多少いい加減です）
・全角空白は半角に

var tab_set = function(str){
//複数指定の場合の処理
　var i, id, ids = str.split(",");
　for(i=0; id=ids[i++];){
　　var div = $("#" + id);
　　if(div.length) init(div);
　}

//　*** 初期処理＋タブ機能設定 ***
　function init(div){
　　$("ul.btn_tab li a", div).focus(function(){
　　　$(this).blur();
　　}).hover(
//ロールオーバー設定
　　　function(){ set_image(this); },
　　　function(){ set_image(this, 1); }
　　).click(function(){
//クリック時の処理設定
　　　var t = $(this);
　　　if(t.hasClass("selected")) return false;
　　　var list = t.parent().siblings("li");
　　　var sel = set_image($("a.selected", list).removeClass("selected"), 2);

　　　if(sel)
　　　　$(sel.attr("href")).fadeOut(500, function(){
　　　　　$(set_image(t.addClass("selected")).attr("href")).fadeIn(500);
　　　　});
　　　return false;
　　}).each(function(){
//初期表示状態
　　　var f = $(this).hasClass("selected")?0:2;
　　　set_image(this, f);
　　　if(f) $($(this).attr("href")).hide();
　　});
　}

//画像url処理（_onの付加・削除）
　function set_image(e, f){
　　var el = $(e), img = $("img", e), src = img.attr("src");
　　if(!src || (f==1 && el.hasClass("selected"))) return;
　　src = src.replace(/^(.+)_on(\.[a-z]+)$/,"$1$2");
　　if(!f) src = src.replace(/^(.+)(\.[a-z]+)$/, "$1_on$2");
　　img.attr("src", src);
　　return el;
　}
};

//　*** タブの設定サンプル ***
//（idを引数で指定。カンマ区切りorそれぞれに）
$(function(){
　tab_set("wrapper1,wrapper2");
　tab_set("wrapper3");
});

お礼

ご回答ありがとうございます！！

お教え頂いた方法でなんとか思っていたようにできそうです。

感謝いたします！
本当にありがとうございました！